/* Clash of Soccer – hoofdmenu. Alles is gescoped onder #cos-menu, dus geen conflicten met game-CSS. */
@font-face{font-family:'BC';font-weight:900;font-style:italic;src:url(fonts/barlow-condensed-900-italic.woff2) format('woff2')}
@font-face{font-family:'BC';font-weight:700;font-style:italic;src:url(fonts/barlow-condensed-700-italic.woff2) format('woff2')}
@font-face{font-family:'BC';font-weight:600;font-style:normal;src:url(fonts/barlow-condensed-600.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-weight:500;src:url(fonts/barlow-500.woff2) format('woff2')}
#cos-menu{--ink:#040a1c;--navy:rgba(10,22,56,.72);--navy-2:rgba(18,38,92,.78);--line:rgba(255,255,255,.14);--yellow:#ffd23f;--blue:#2f6bff;--green:#3fd16a;--red:#ff3b47;--purple:#9b5bff;--orange:#ff8a3d;--text:#eef3ff;--muted:#8fa3cf;--L:max(4.5vw,env(safe-area-inset-left));--R:max(4.5vw,env(safe-area-inset-right));--T:max(4vh,env(safe-area-inset-top))}
#cos-menu{position:fixed;inset:0;overflow:hidden;background:var(--ink);color:var(--text);font-family:'Barlow',system-ui,sans-serif;-webkit-user-select:none;user-select:none;z-index:50}
#cos-menu,#cos-menu *{box-sizing:border-box;margin:0;padding:0}
#cos-menu .scr{position:absolute;inset:0;display:none}#cos-menu .scr.on{display:block}
#cos-menu #soc,#cos-menu #wn{display:none}#cos-menu #soc.on,#cos-menu #wn.on{display:block}
#cos-menu [data-go],#cos-menu [data-open]{cursor:pointer}

/* ===== LOBBY · PLAY · TEAM ===== */
#cos-menu .scr{position:fixed;inset:0;display:none}
#cos-menu .scr.on{display:block}
#cos-menu .lob .bg{position:absolute;inset:-4%;background:
  radial-gradient(70% 55% at 50% 40%, rgba(47,107,255,.30), transparent 70%),
  radial-gradient(40% 35% at 0% 0%, rgba(255,255,240,.16), transparent 70%),
  radial-gradient(40% 35% at 100% 0%, rgba(255,255,240,.16), transparent 70%),
  linear-gradient(180deg,#0b1940 0%,#071029 55%,#040a1c 100%)}
#cos-menu .lob .bokeh{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(circle at 10% 18%, rgba(255,255,240,.16) 0 3vh, transparent 7vh),radial-gradient(circle at 90% 12%, rgba(255,255,240,.13) 0 3vh, transparent 8vh),
  radial-gradient(circle at 62% 8%, rgba(160,190,255,.12) 0 2vh, transparent 6vh),radial-gradient(circle at 22% 60%, rgba(160,190,255,.09) 0 4vh, transparent 9vh),
  radial-gradient(circle at 78% 70%, rgba(255,226,140,.07) 0 4vh, transparent 10vh),radial-gradient(circle at 45% 35%, rgba(160,190,255,.08) 0 3vh, transparent 8vh)}
#cos-menu .lob .pitch{position:absolute;left:-10%;right:-10%;bottom:-8%;height:48%;transform-origin:50% 100%;transform:perspective(70vh) rotateX(58deg);opacity:.45;
  background:radial-gradient(ellipse 13% 22% at 50% 12%, transparent 96%, rgba(140,180,255,.55) 97%, rgba(140,180,255,.55) 99%, transparent 100%),
  linear-gradient(90deg, transparent calc(50% - 1px), rgba(140,180,255,.55) calc(50% - 1px), rgba(140,180,255,.55) calc(50% + 1px), transparent calc(50% + 1px)),
  linear-gradient(180deg, rgba(140,180,255,.55) 0 2px, transparent 2px),
  repeating-linear-gradient(90deg, rgba(47,107,255,.10) 0 6%, rgba(47,107,255,.04) 6% 12%);
  -webkit-mask:linear-gradient(to top,#000 10%,transparent 95%);mask:linear-gradient(to top,#000 10%,transparent 95%)}
#cos-menu .lob .streaks{position:absolute;inset:0;overflow:hidden}
#cos-menu .lob .streaks i{position:absolute;top:-30%;height:160%;width:14vw;transform:rotate(24deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent)}
#cos-menu .lob .streaks i:nth-child(1){left:8%}
#cos-menu .lob .streaks i:nth-child(2){left:52%;width:8vw}
#cos-menu .lob .streaks i:nth-child(3){left:78%;width:20vw}
#cos-menu .lob .grain{position:absolute;inset:0;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
#cos-menu .lob .vig{position:absolute;inset:0;background:radial-gradient(120% 95% at 50% 45%, transparent 50%, rgba(2,5,15,.8) 100%)}
#cos-menu .lob .glass{background:linear-gradient(180deg,var(--navy-2),var(--navy));border:1px solid var(--line);box-shadow:0 1.4vh 3vh rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12)}
#cos-menu .lob .foot{position:absolute;left:max(4.5vw,env(safe-area-inset-left));right:max(4.5vw,env(safe-area-inset-right));bottom:max(4vh,env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between}
#cos-menu .lob .online{display:flex;align-items:center;gap:1.2vh;font-family:'BC';font-weight:700;font-style:italic;font-size:3.2vh;height:8vh;padding:0 2.4vh;border-radius:99px}
#cos-menu .lob .online i{width:1.6vh;height:1.6vh;border-radius:50%;background:var(--green);box-shadow:0 0 1.4vh var(--green)}
#cos-menu .lob .online small{font-family:'BC';font-weight:600;font-style:normal;font-size:2.2vh;letter-spacing:.2em;color:var(--muted)}
#cos-menu .lob .ver{font-family:'BC';font-weight:600;font-size:2.2vh;letter-spacing:.24em;color:#5d6f99}
#cos-menu .lob .chat{display:flex;align-items:center;gap:1.4vh;height:8vh;padding:0 2.6vh;border-radius:99px;font-family:'BC';font-weight:700;font-style:italic;font-size:3.2vh;letter-spacing:.08em}
#cos-menu .lob .chat b{min-width:3.4vh;height:3.4vh;border-radius:99px;background:var(--red);font-family:'BC';font-weight:900;font-size:2.2vh;display:grid;place-items:center;padding:0 .8vh;font-style:normal}
#cos-menu .lob .topl{position:absolute;left:max(4.5vw,env(safe-area-inset-left));top:max(4vh,env(safe-area-inset-top))}
#cos-menu .lob .topr{position:absolute;right:max(4.5vw,env(safe-area-inset-right));top:max(4vh,env(safe-area-inset-top));display:flex;gap:1.4vh;align-items:center}
#cos-menu .lob .profile{display:flex;align-items:center;gap:1.6vh;height:10vh;padding:0 2.6vh 0 1.2vh;border-radius:99px}
#cos-menu .lob .avatar{width:7.6vh;height:7.6vh;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 30%,#3a6cff,#16307a);border:2px solid var(--yellow);flex:none;position:relative}
#cos-menu .lob .avatar img{position:absolute;width:150%;left:-25%;top:-32%}
#cos-menu .lob .pname{font-family:'BC';font-weight:700;font-style:italic;font-size:3.6vh;line-height:1}
#cos-menu .lob .pteam{display:flex;align-items:center;gap:.8vh;font-family:'BC';font-weight:600;font-size:2.1vh;letter-spacing:.22em;color:var(--muted);margin-top:.6vh}
#cos-menu .lob .pteam i{width:.6vh;height:2.4vh;background:var(--blue);transform:skewX(-14deg);box-shadow:0 0 1vh var(--blue)}
#cos-menu .lob .coins{height:9vh;display:flex;align-items:center;gap:1.2vh;padding:0 1.2vh 0 2vh;border-radius:1.6vh}
#cos-menu .lob .coins i{width:3vh;height:3vh;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff2a8,#ffd23f 45%,#c98a00);box-shadow:0 0 1.2vh rgba(255,210,63,.6)}
#cos-menu .lob .coins b{font-family:'BC';font-weight:900;font-style:italic;font-size:3.2vh;color:var(--yellow)}
#cos-menu .lob .coins .plus{width:4.4vh;height:4.4vh;display:grid;place-items:center;background:var(--yellow);color:#07112b;font-family:'BC';font-weight:900;font-size:3vh;clip-path:polygon(.5vh 0,100% 0,calc(100% - .5vh) 100%,0 100%);margin-left:.6vh}
#cos-menu .lob .gear{height:9vh;display:flex;align-items:center;padding:0 2.4vh;border-radius:1.6vh;font-family:'BC';font-weight:600;font-size:2.2vh;letter-spacing:.3em;color:var(--muted)}
#cos-menu .lob .back{height:9vh;display:flex;align-items:center;gap:1.2vh;padding:0 2.6vh 0 2vh;border-radius:1.6vh;font-family:'BC';font-weight:700;font-style:italic;font-size:3.2vh;letter-spacing:.1em}
#cos-menu .lob .back::before{content:'';width:1.6vh;height:1.6vh;border-left:.4vh solid var(--text);border-bottom:.4vh solid var(--text);transform:rotate(45deg);margin-right:.4vh}
#cos-menu .lob .chip{height:9vh;display:flex;align-items:center;gap:1.6vh;padding:0 2.4vh;border-radius:1.6vh}
#cos-menu .lob .chip .k{font-family:'BC';font-weight:600;font-size:2.1vh;letter-spacing:.3em;color:var(--muted)}
#cos-menu .lob .chip .v{font-family:'BC';font-weight:700;font-style:italic;font-size:3vh}
#cos-menu .lob .chip .sep{width:1px;height:4vh;background:var(--line)}
#cos-menu .lob .kick{font-family:'BC';font-weight:600;font-size:2.4vh;letter-spacing:.34em;color:var(--muted);text-transform:uppercase}
#cos-menu .lob .wm{font-family:'BC';font-weight:900;font-style:italic;line-height:.84;letter-spacing:.005em;text-align:center}
#cos-menu .lob .wm .l{display:block;white-space:nowrap;background:linear-gradient(180deg,#ffffff 0%,#dfe8ff 60%,#9fb6ee 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 .8vh 2vh rgba(0,0,0,.5))}
#cos-menu .lob .wm .of{background:linear-gradient(180deg,#ffe27a,var(--yellow) 55%,#e8aa00);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em}
#cos-menu .lob .wm .ul{height:.6vh;border-radius:1vh;background:linear-gradient(90deg,transparent,var(--yellow),transparent);box-shadow:0 0 2.4vh rgba(255,210,63,.55);margin:1.6vh auto 0}
#cos-menu .lob .wm .tag{display:flex;align-items:center;justify-content:center;gap:2vh;font-family:'BC';font-weight:600;font-style:normal;font-size:2.2vh;letter-spacing:.42em;color:var(--muted);margin-top:1.4vh}
#cos-menu .lob .wm .tag::before,#cos-menu .lob .wm .tag::after{content:'';width:7vh;height:1px;background:linear-gradient(90deg,transparent,rgba(255,210,63,.7))}
#cos-menu .lob .wm .tag::after{transform:scaleX(-1)}
#cos-menu .lob .wm.small{position:absolute;left:50%;top:max(4vh,env(safe-area-inset-top));transform:translateX(-50%);height:9vh;display:flex;align-items:center}
#cos-menu .lob .wm.small .l{font-size:4.6vh;filter:none}
#cos-menu .lob .pan{position:relative;display:flex;flex-direction:column;justify-content:center;overflow:hidden;
  clip-path:polygon(2.4vh 0,100% 0,calc(100% - 2.4vh) 100%,0 100%);background:linear-gradient(180deg,rgba(14,30,72,.9),rgba(8,18,46,.75))}
#cos-menu .lob .pan::after{content:'';position:absolute;left:0;right:0;bottom:0;height:.9vh;background:var(--c);box-shadow:0 0 2vh var(--c)}
#cos-menu .lob .pan .t{font-family:'BC';font-weight:900;font-style:italic;font-size:5.6vh;line-height:.9}
#cos-menu .lob .pan .d{font-family:'BC';font-weight:600;font-size:2vh;letter-spacing:.24em;color:var(--muted);margin-top:.8vh;white-space:nowrap}
#cos-menu .lob .pan.yel{background:linear-gradient(100deg,#ffe58a,var(--yellow) 45%,#f2b400);color:#07112b}
#cos-menu .lob .pan.yel::after{display:none}
#cos-menu .lob .pan.yel .d{color:#07112b;opacity:.65}
#cos-menu .lob .btn-dark{height:6.6vh;padding:0 2.6vh;border-radius:1vh;background:#07112b;color:var(--yellow);display:flex;align-items:center;font-family:'BC';font-weight:900;font-style:italic;font-size:2.8vh;letter-spacing:.12em}
#cos-menu #lobby .wm{position:absolute;left:50%;top:24vh;transform:translateX(-50%);width:100%}
#cos-menu #lobby .wm .l{font-size:19vh}
#cos-menu #lobby .wm .ul{width:40vh}
#cos-menu #lobby .rowp{position:absolute;left:max(4.5vw,env(safe-area-inset-left));right:max(4.5vw,env(safe-area-inset-right));bottom:15vh;display:flex;gap:1.4vh;height:22vh}
#cos-menu #lobby .pan{flex:1;padding:0 3vh}
#cos-menu #lobby .pan.yel{flex:1.7}
#cos-menu #lobby .pan.yel .t{font-size:10vh}
#cos-menu #lobby .pan .t{font-size:5.2vh}
#cos-menu #lobby .pan .d{font-size:1.8vh;letter-spacing:.18em}
#cos-menu #lobby .pan.yel .btn-dark{position:absolute;right:4vh;top:50%;transform:translateY(-50%)}
#cos-menu #play .head{position:absolute;left:max(4.5vw,env(safe-area-inset-left));top:18vh}
#cos-menu #play .head .t{font-family:'BC';font-weight:900;font-style:italic;font-size:13vh;line-height:.85;margin-top:1.4vh}
#cos-menu #play .head .t em{font-style:inherit;color:var(--yellow)}
#cos-menu #play .head .ul{width:14vh;height:.7vh;background:var(--yellow);border-radius:1vh;box-shadow:0 0 2vh rgba(255,210,63,.6);margin:2vh 0}
#cos-menu #play .head .d{font-size:2.7vh;color:#b9c7e8;line-height:1.4;max-width:24vw}
#cos-menu #play .cards{position:absolute;right:max(4.5vw,env(safe-area-inset-right));top:17vh;bottom:16vh;width:62vw;display:flex;gap:1.4vh}
#cos-menu #play .pan{flex:1;justify-content:flex-end;padding:2.6vh 2.8vh}
#cos-menu #play .pan::before{content:'';position:absolute;left:0;right:0;top:0;height:50%;background:radial-gradient(90% 100% at 50% 0%, color-mix(in srgb,var(--c) 32%,transparent), transparent 75%)}
#cos-menu #play .pan.yel::before{display:none}
#cos-menu #play .pan .n{position:absolute;right:1.8vh;top:1.6vh;font-family:'BC';font-weight:900;font-style:italic;font-size:11vh;line-height:.8;color:rgba(255,255,255,.06)}
#cos-menu #play .pan.yel .n{color:rgba(7,17,43,.08)}
#cos-menu #play .pan .t{font-size:5.8vh;text-transform:uppercase}
#cos-menu #play .pan .x{font-size:2.3vh;color:#b9c7e8;line-height:1.35;margin-top:1.2vh;white-space:normal;font-family:'Barlow';font-weight:500}
#cos-menu #play .pan.yel .x{color:#07112b;opacity:.7}
#cos-menu #play .pan .meta{display:flex;align-items:center;justify-content:space-between;margin-top:2vh;padding-top:1.8vh;border-top:1px solid var(--line);font-family:'BC';font-weight:600;font-size:2vh;letter-spacing:.22em;color:var(--muted)}
#cos-menu #play .pan.yel .meta{border-top-color:rgba(7,17,43,.25);color:#07112b}
#cos-menu #play .pan .meta i{display:inline-block;width:1.2vh;height:1.2vh;border-radius:50%;background:var(--green);box-shadow:0 0 1vh var(--green);margin-right:.8vh;vertical-align:.1em}
#cos-menu #play .pan .meta .arr{width:4.6vh;height:4.6vh;border-radius:50%;border:1px solid var(--line);position:relative}
#cos-menu #play .pan .meta .arr::after{content:'';position:absolute;left:50%;top:50%;width:1.2vh;height:1.2vh;border-right:.35vh solid currentColor;border-top:.35vh solid currentColor;transform:translate(-65%,-50%) rotate(45deg)}
#cos-menu #play .pan.yel .meta .arr{background:#07112b;color:var(--yellow);border:0}
#cos-menu #play .pan .pop{position:absolute;left:2.8vh;top:2.2vh;font-family:'BC';font-weight:700;font-style:italic;font-size:1.9vh;letter-spacing:.16em;color:var(--yellow);background:#07112b;padding:.5vh 1.1vh;border-radius:.6vh}
#cos-menu #team .thead{position:absolute;left:calc(max(4.5vw,env(safe-area-inset-left)) + 22vh);top:max(4vh,env(safe-area-inset-top));height:9vh;display:flex;align-items:center;gap:2vh}
#cos-menu #team .tcol{width:2vh;height:8vh;background:var(--blue);transform:skewX(-14deg);box-shadow:0 0 2vh var(--blue);border-radius:2px}
#cos-menu #team .tname{font-family:'BC';font-weight:900;font-style:italic;font-size:6vh;line-height:.9}
#cos-menu #team .tsub{font-family:'BC';font-weight:600;font-size:2.1vh;letter-spacing:.26em;color:var(--muted);margin-top:.5vh}
#cos-menu #team .tsub b{color:var(--yellow);font-weight:600}
#cos-menu #team .grid{position:absolute;left:max(4.5vw,env(safe-area-inset-left));right:max(4.5vw,env(safe-area-inset-right));top:18vh;bottom:16vh;display:grid;grid-template-columns:1.75fr 1fr;gap:1.6vh}
#cos-menu #team .pan{justify-content:flex-start;padding:2.6vh 3.4vh 2.4vh}
#cos-menu #team .ph{display:flex;align-items:flex-end;justify-content:space-between}
#cos-menu #team .ph .h{font-family:'BC';font-weight:900;font-style:italic;font-size:5vh;line-height:.9}
#cos-menu #team .ph .s{font-size:2.3vh;color:#b9c7e8;margin-top:.6vh}
#cos-menu #team .ph .more{display:flex;align-items:center;gap:1.4vh;font-family:'BC';font-weight:700;font-style:italic;font-size:2.8vh}
#cos-menu #team .ph .more small{font-family:'BC';font-weight:600;font-style:normal;font-size:2vh;letter-spacing:.22em;color:var(--muted)}
#cos-menu #team .ph .more .go{width:5vh;height:5vh;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.06);position:relative}
#cos-menu #team .ph .more .go::after{content:'';position:absolute;left:50%;top:50%;width:1.3vh;height:1.3vh;border-right:.35vh solid var(--text);border-top:.35vh solid var(--text);transform:translate(-65%,-50%) rotate(45deg)}
#cos-menu #team .squad{flex:1;display:grid;grid-template-columns:repeat(5,1fr);gap:1.4vh;margin-top:2.2vh}
#cos-menu .lob .pc{position:relative;overflow:hidden;display:flex;flex-direction:column;clip-path:polygon(1.4vh 0,100% 0,calc(100% - 1.4vh) 100%,0 100%);
  background:linear-gradient(180deg, color-mix(in srgb,var(--c) 38%,#0b1840) 0%, #0b1840 62%)}
#cos-menu .lob .pc::before{content:'';position:absolute;left:0;right:0;top:0;height:.7vh;background:var(--c);box-shadow:0 0 1.6vh var(--c)}
#cos-menu .lob .pc.cap::before{background:var(--yellow);box-shadow:0 0 1.6vh var(--yellow)}
#cos-menu .lob .pc .rt{position:absolute;left:1.6vh;top:1.6vh;z-index:2;line-height:.9}
#cos-menu .lob .pc .rt b{display:block;font-family:'BC';font-weight:900;font-style:italic;font-size:5vh}
#cos-menu .lob .pc .rt span{font-family:'BC';font-weight:700;font-style:italic;font-size:2.3vh;letter-spacing:.06em;color:color-mix(in srgb,var(--c) 40%,#fff)}
#cos-menu .lob .pc .cc{position:absolute;right:1.8vh;top:1.6vh;z-index:2;width:3.8vh;height:3.8vh;background:var(--yellow);color:#07112b;display:grid;place-items:center;font-family:'BC';font-weight:900;font-style:italic;font-size:2.4vh;clip-path:polygon(.6vh 0,100% 0,calc(100% - .6vh) 100%,0 100%)}
#cos-menu .lob .pc .art{flex:1;position:relative;overflow:hidden}
#cos-menu .lob .pc .art canvas{position:absolute;left:50%;bottom:4%;height:74%;transform:translateX(-50%);image-rendering:pixelated;filter:drop-shadow(0 1vh 1.2vh rgba(0,0,0,.45))}
#cos-menu .lob .pc .art::after{content:attr(data-n);position:absolute;right:1.4vh;bottom:.4vh;font-family:'BC';font-weight:900;font-style:italic;font-size:7vh;color:rgba(255,255,255,.08)}
#cos-menu .lob .pc .nm{position:relative;z-index:2;text-align:center;font-family:'BC';font-weight:700;font-style:italic;font-size:2.7vh;letter-spacing:.08em;padding:1.1vh 0;background:rgba(4,10,28,.7);border-top:1px solid var(--line)}
#cos-menu #team .pc.empty{background:rgba(255,255,255,.03);outline:1px dashed rgba(255,255,255,.2);outline-offset:-1px}
#cos-menu #team .pc.empty::before{background:rgba(255,255,255,.15);box-shadow:none}
#cos-menu #team .pc.empty .art{display:grid;place-items:center}
#cos-menu #team .pc.empty .plus{width:7vh;height:7vh;display:grid;place-items:center;border:1px dashed rgba(255,255,255,.3);font-family:'BC';font-weight:900;font-size:4.4vh;color:rgba(255,255,255,.35)}
#cos-menu #team .pc.empty .nm{color:#8fa3cf}
#cos-menu #team .squad.list{display:flex;flex-direction:column;gap:0;grid-template-columns:none;margin-top:1.4vh;overflow:hidden}
#cos-menu #team .lrow{display:grid;grid-template-columns:5.6vh 1fr 6.5vh 7vh 7vh 7vh 7.5vh;align-items:center;gap:1.2vh;padding:1vh 0;border-top:1px solid rgba(255,255,255,.08)}
#cos-menu #team .lrow.hd{font-family:'BC';font-weight:600;font-size:1.6vh;letter-spacing:.22em;color:var(--muted);border-top:0;padding:.2vh 0 .6vh}
#cos-menu #team .lrow.hd div{text-align:center}
#cos-menu #team .lrow.hd div:nth-child(2){text-align:left}
#cos-menu #team .lav{position:relative;width:5.6vh;height:5.6vh;overflow:hidden;clip-path:polygon(.6vh 0,100% 0,calc(100% - .6vh) 100%,0 100%);background:linear-gradient(135deg,color-mix(in srgb,var(--c) 70%,#fff),color-mix(in srgb,var(--c) 70%,#000))}
#cos-menu #team .lav canvas{position:absolute;height:175%;width:auto;left:50%;top:-6%;transform:translateX(-50%);image-rendering:pixelated}
#cos-menu #team .lnm{display:flex;align-items:center;gap:1vh;font-family:'BC';font-weight:700;font-style:italic;font-size:3vh;min-width:0;white-space:nowrap}
#cos-menu #team .lnm small{font-family:'BC';font-weight:600;font-style:normal;font-size:1.6vh;letter-spacing:.16em;color:var(--muted)}
#cos-menu #team .lnm .cb2{font-weight:900;font-size:1.5vh;letter-spacing:.1em;padding:.2vh .7vh;background:var(--yellow);color:#07112b;font-style:italic;clip-path:polygon(.3vh 0,100% 0,calc(100% - .3vh) 100%,0 100%)}
#cos-menu #team .lpos{justify-self:center;font-family:'BC';font-weight:900;font-style:italic;font-size:2vh;padding:.2vh .9vh;background:rgba(255,255,255,.08);border:1px solid var(--line)}
#cos-menu #team .lnum{text-align:center;font-family:'BC';font-weight:900;font-style:italic;font-size:2.8vh}
#cos-menu #team .lnum.y{color:var(--yellow)}
#cos-menu #team .lrow.empty .lav{background:rgba(255,255,255,.04);outline:1px dashed rgba(255,255,255,.25);outline-offset:-1px;display:grid;place-items:center;font-family:'BC';font-weight:900;color:rgba(255,255,255,.35)}
#cos-menu #team .lrow.empty .lnm{color:#5d6f99}
#cos-menu #team .kits{flex:1;display:flex;flex-direction:column;gap:1.6vh;margin-top:2.2vh}
#cos-menu #team .crest{flex:1;display:flex;align-items:center;gap:2.4vh;padding:1.6vh 2vh;background:rgba(255,255,255,.05);border:1px solid var(--line)}
#cos-menu #team .crest .cb{width:14vh;height:14vh;flex:none;display:grid;place-items:center;clip-path:polygon(1.2vh 0,100% 0,calc(100% - 1.2vh) 100%,0 100%);
  background:linear-gradient(135deg,#6f9bff,#1b45c9);font-family:'BC';font-weight:900;font-style:italic;font-size:5.6vh;color:#fff;text-shadow:0 .4vh 0 rgba(0,0,0,.3)}
#cos-menu #team .crest .cn{font-family:'BC';font-weight:900;font-style:italic;font-size:4vh;line-height:.9}
#cos-menu #team .crest .cs{font-family:'BC';font-weight:600;font-size:2vh;letter-spacing:.22em;color:var(--muted);margin-top:.8vh}
#cos-menu #team .sw{display:flex;gap:.8vh;margin-top:1.2vh}
#cos-menu #team .sw i{width:3.2vh;height:3.2vh;border:2px solid rgba(255,255,255,.35);transform:skewX(-14deg)}
#cos-menu #team .kitrow{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2vh}
#cos-menu #team .kit{background:rgba(255,255,255,.05);border:1px solid var(--line);padding:1.2vh 0 .8vh;text-align:center}
#cos-menu #team .kit.sel{border:2px solid var(--yellow);background:rgba(255,210,63,.08)}
#cos-menu #team .kit svg{width:72%;height:auto;display:block;margin:0 auto;filter:drop-shadow(0 .6vh 1vh rgba(0,0,0,.4))}
#cos-menu #team .kit span{font-family:'BC';font-weight:600;font-size:1.8vh;letter-spacing:.22em;color:var(--muted)}

/* ===== CAREER ===== */
#cos-menu .scr{position:fixed;inset:0}
#cos-menu #career .bg{position:absolute;inset:-4%;background:
  radial-gradient(70% 55% at 50% 40%, rgba(47,107,255,.30), transparent 70%),
  radial-gradient(40% 35% at 0% 0%, rgba(255,255,240,.16), transparent 70%),
  radial-gradient(40% 35% at 100% 0%, rgba(255,255,240,.16), transparent 70%),
  linear-gradient(180deg,#0b1940 0%,#071029 55%,#040a1c 100%)}
#cos-menu #career .bokeh{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(circle at 10% 18%, rgba(255,255,240,.16) 0 3vh, transparent 7vh),radial-gradient(circle at 90% 12%, rgba(255,255,240,.13) 0 3vh, transparent 8vh),
  radial-gradient(circle at 62% 8%, rgba(160,190,255,.12) 0 2vh, transparent 6vh),radial-gradient(circle at 22% 60%, rgba(160,190,255,.09) 0 4vh, transparent 9vh),
  radial-gradient(circle at 78% 70%, rgba(255,226,140,.07) 0 4vh, transparent 10vh),radial-gradient(circle at 45% 35%, rgba(160,190,255,.08) 0 3vh, transparent 8vh)}
#cos-menu #career .pitch{position:absolute;left:-10%;right:-10%;bottom:-8%;height:48%;transform-origin:50% 100%;transform:perspective(70vh) rotateX(58deg);opacity:.45;
  background:radial-gradient(ellipse 13% 22% at 50% 12%, transparent 96%, rgba(140,180,255,.55) 97%, rgba(140,180,255,.55) 99%, transparent 100%),
  linear-gradient(90deg, transparent calc(50% - 1px), rgba(140,180,255,.55) calc(50% - 1px), rgba(140,180,255,.55) calc(50% + 1px), transparent calc(50% + 1px)),
  linear-gradient(180deg, rgba(140,180,255,.55) 0 2px, transparent 2px),
  repeating-linear-gradient(90deg, rgba(47,107,255,.10) 0 6%, rgba(47,107,255,.04) 6% 12%);
  -webkit-mask:linear-gradient(to top,#000 10%,transparent 95%);mask:linear-gradient(to top,#000 10%,transparent 95%)}
#cos-menu #career .streaks{position:absolute;inset:0;overflow:hidden}
#cos-menu #career .streaks i{position:absolute;top:-30%;height:160%;width:14vw;transform:rotate(24deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent)}
#cos-menu #career .streaks i:nth-child(1){left:8%}
#cos-menu #career .streaks i:nth-child(2){left:52%;width:8vw}
#cos-menu #career .streaks i:nth-child(3){left:78%;width:20vw}
#cos-menu #career .grain{position:absolute;inset:0;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
#cos-menu #career .vig{position:absolute;inset:0;background:radial-gradient(120% 95% at 50% 45%, transparent 50%, rgba(2,5,15,.8) 100%)}
#cos-menu #career .glass{background:linear-gradient(180deg,var(--navy-2),var(--navy));border:1px solid var(--line);box-shadow:0 1.4vh 3vh rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12)}
#cos-menu #career .foot{position:absolute;left:var(--L);right:var(--R);bottom:max(4vh,env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between}
#cos-menu #career .online{display:flex;align-items:center;gap:1.2vh;font-family:'BC';font-weight:700;font-style:italic;font-size:3.2vh;height:8vh;padding:0 2.4vh;border-radius:99px}
#cos-menu #career .online i{width:1.6vh;height:1.6vh;border-radius:50%;background:var(--green);box-shadow:0 0 1.4vh var(--green)}
#cos-menu #career .online small{font-family:'BC';font-weight:600;font-style:normal;font-size:2.2vh;letter-spacing:.2em;color:var(--muted)}
#cos-menu #career .ver{font-family:'BC';font-weight:600;font-size:2.2vh;letter-spacing:.24em;color:#5d6f99}
#cos-menu #career .chat{display:flex;align-items:center;gap:1.4vh;height:8vh;padding:0 2.6vh;border-radius:99px;font-family:'BC';font-weight:700;font-style:italic;font-size:3.2vh;letter-spacing:.08em}
#cos-menu #career .chat b{min-width:3.4vh;height:3.4vh;border-radius:99px;background:var(--red);font-family:'BC';font-weight:900;font-size:2.2vh;display:grid;place-items:center;padding:0 .8vh;font-style:normal}
#cos-menu #career .topl{position:absolute;left:var(--L);top:var(--T)}
#cos-menu #career .topr{position:absolute;right:var(--R);top:var(--T);display:flex;gap:1.4vh;align-items:center}
#cos-menu #career .back{height:9vh;display:flex;align-items:center;gap:1.2vh;padding:0 2.6vh 0 2vh;border-radius:1.6vh;font-family:'BC';font-weight:700;font-style:italic;font-size:3.2vh;letter-spacing:.1em}
#cos-menu #career .back::before{content:'';width:1.6vh;height:1.6vh;border-left:.4vh solid var(--text);border-bottom:.4vh solid var(--text);transform:rotate(45deg);margin-right:.4vh}
#cos-menu #career .chip{height:9vh;display:flex;align-items:center;gap:1.6vh;padding:0 2.4vh;border-radius:1.6vh}
#cos-menu #career .chip .k{font-family:'BC';font-weight:600;font-size:2.1vh;letter-spacing:.3em;color:var(--muted)}
#cos-menu #career .chip .v{font-family:'BC';font-weight:700;font-style:italic;font-size:3vh}
#cos-menu #career .chip .sep{width:1px;height:4vh;background:var(--line)}
#cos-menu #career .pan{position:relative;display:flex;flex-direction:column;overflow:hidden;
  clip-path:polygon(2.4vh 0,100% 0,calc(100% - 2.4vh) 100%,0 100%);background:linear-gradient(180deg,rgba(14,30,72,.9),rgba(8,18,46,.75))}
#cos-menu #career .pan::after{content:'';position:absolute;left:0;right:0;bottom:0;height:.9vh;background:var(--c);box-shadow:0 0 2vh var(--c)}
#cos-menu #career .ph{display:flex;align-items:flex-end;justify-content:space-between}
#cos-menu #career .ph .h{font-family:'BC';font-weight:900;font-style:italic;font-size:4.6vh;line-height:.9}
#cos-menu #career .ph .s{font-size:2.2vh;color:#b9c7e8;margin-top:.6vh}
#cos-menu #career .ph .more{display:flex;align-items:center;gap:1.2vh;font-family:'BC';font-weight:700;font-style:italic;font-size:2.8vh}
#cos-menu #career .ph .more small{font-family:'BC';font-weight:600;font-style:normal;font-size:2vh;letter-spacing:.22em;color:var(--muted)}
#cos-menu #career .head{position:absolute;left:calc(var(--L) + 22vh);top:var(--T);height:9vh;display:flex;align-items:center;gap:2vh}
#cos-menu #career .head .bar{width:2vh;height:8vh;background:var(--yellow);transform:skewX(-14deg);box-shadow:0 0 2vh rgba(255,210,63,.6);border-radius:2px}
#cos-menu #career .head .t{font-family:'BC';font-weight:900;font-style:italic;font-size:6vh;line-height:.9}
#cos-menu #career .head .d{font-family:'BC';font-weight:600;font-size:2.1vh;letter-spacing:.26em;color:var(--muted);margin-top:.5vh}
#cos-menu #career .grid{position:absolute;left:var(--L);right:var(--R);top:17.5vh;bottom:15.5vh;display:grid;grid-template-columns:30vw 1fr;grid-template-rows:1.3fr 1fr;gap:1.4vh}
#cos-menu #career .card{grid-row:1/3}
#cos-menu #career .card{padding:2.2vh 2.6vh 2vh;background:linear-gradient(180deg,rgba(47,107,255,.32) 0%,rgba(14,30,72,.9) 38%,rgba(8,18,46,.8) 100%)}
#cos-menu #career .card .ghost{position:absolute;right:1.6vh;top:-1vh;font-family:'BC';font-weight:900;font-style:italic;font-size:22vh;line-height:.8;color:rgba(255,255,255,.05);pointer-events:none}
#cos-menu #career .card .top{display:flex;align-items:center;gap:2.4vh;flex:1;min-height:0}
#cos-menu #career .card .art{position:relative;width:21vh;height:36vh;flex:none;align-self:flex-end}
#cos-menu #career .card .art::before{content:'';position:absolute;left:50%;bottom:1.2vh;width:22vh;height:5vh;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse at center, rgba(0,0,0,.55), transparent 70%)}
#cos-menu #career .card .art img{position:absolute;left:50%;bottom:1.4vh;height:100%;transform:translateX(-50%);image-rendering:pixelated;filter:drop-shadow(0 1vh 1.2vh rgba(0,0,0,.45))}
#cos-menu #career .card .who{flex:1;padding-bottom:3vh;min-width:0}
#cos-menu #career .card .ovr{display:flex;align-items:baseline;gap:1vh;line-height:.9}
#cos-menu #career .card .ovr b{font-family:'BC';font-weight:900;font-style:italic;font-size:8vh;color:var(--yellow)}
#cos-menu #career .card .ovr span{font-family:'BC';font-weight:600;font-size:2vh;letter-spacing:.3em;color:var(--muted)}
#cos-menu #career .card .nm{font-family:'BC';font-weight:900;font-style:italic;font-size:5.2vh;line-height:.9;margin-top:1.4vh;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cos-menu #career .card .nm small{display:block;font-size:3vh;font-weight:700;color:#b9c7e8}
#cos-menu #career .card .tags{display:flex;align-items:center;gap:1.2vh;margin-top:1.6vh;flex-wrap:wrap}
#cos-menu #career .tag{height:4.2vh;display:inline-flex;align-items:center;gap:1vh;padding:0 1.4vh;font-family:'BC';font-weight:700;font-style:italic;font-size:2.4vh;letter-spacing:.08em;background:rgba(255,255,255,.07);border:1px solid var(--line);clip-path:polygon(.8vh 0,100% 0,calc(100% - .8vh) 100%,0 100%)}
#cos-menu #career .tag.pos{background:var(--yellow);color:#07112b;border:0;font-weight:900}
#cos-menu #career .tag.pos small{font-weight:700;opacity:.65;letter-spacing:.14em;font-size:1.9vh}
#cos-menu #career .tag i{width:.6vh;height:2.4vh;background:var(--c,var(--blue));transform:skewX(-14deg);box-shadow:0 0 1vh var(--c,var(--blue))}
#cos-menu #career .card .since{font-family:'BC';font-weight:600;font-size:1.9vh;letter-spacing:.22em;color:var(--muted);margin-top:1.2vh}
#cos-menu #career .card .tot{display:grid;grid-template-columns:repeat(4,1fr);gap:1vh;margin-top:1.4vh;padding-top:1.8vh;border-top:1px solid var(--line)}
#cos-menu #career .card .tot div{text-align:center}
#cos-menu #career .card .tot b{display:block;font-family:'BC';font-weight:900;font-style:italic;font-size:4.6vh;line-height:.9}
#cos-menu #career .card .tot span{display:block;font-family:'BC';font-weight:600;font-size:1.8vh;letter-spacing:.22em;color:var(--muted);margin-top:.5vh}
#cos-menu #career .card .tot .g b{color:var(--yellow)}
#cos-menu #career .hist{padding:2vh 2.8vh 2.2vh}
#cos-menu #career .tbl{flex:1;display:flex;flex-direction:column;margin-top:1.4vh;min-height:0}
#cos-menu #career .row{display:grid;grid-template-columns:1fr 19vh 7.5vh 7.5vh 8.5vh 8.5vh;align-items:center;gap:1vh;height:7.2vh;border-top:1px solid rgba(255,255,255,.08)}
#cos-menu #career .row.hd{height:3.6vh;border-top:0;font-family:'BC';font-weight:600;font-size:1.8vh;letter-spacing:.24em;color:var(--muted)}
#cos-menu #career .row .n{font-family:'BC';font-weight:900;font-style:italic;font-size:3.4vh;text-align:center}
#cos-menu #career .row.hd .n{font:inherit;color:inherit;text-align:center}
#cos-menu #career .row .club{display:flex;align-items:center;gap:1.6vh;min-width:0}
#cos-menu #career .crest{width:5.2vh;height:5.2vh;flex:none;display:grid;place-items:center;clip-path:polygon(.7vh 0,100% 0,calc(100% - .7vh) 100%,0 100%);
  background:linear-gradient(135deg,color-mix(in srgb,var(--c) 70%,#fff),color-mix(in srgb,var(--c) 70%,#000));font-family:'BC';font-weight:900;font-style:italic;font-size:2.1vh;color:#fff;text-shadow:0 .3vh 0 rgba(0,0,0,.3)}
#cos-menu #career .row .cn{font-family:'BC';font-weight:700;font-style:italic;font-size:3vh;line-height:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cos-menu #career .row .cs{font-family:'BC';font-weight:600;font-size:1.8vh;letter-spacing:.2em;color:var(--muted);margin-top:.5vh}
#cos-menu #career .row .per{font-family:'BC';font-weight:600;font-size:1.9vh;letter-spacing:.14em;color:#b9c7e8;text-align:center;white-space:nowrap}
#cos-menu #career .row.cur{background:linear-gradient(90deg,rgba(255,210,63,.1),transparent 70%);box-shadow:inset .5vh 0 0 var(--yellow)}
#cos-menu #career .row.cur .cs{color:var(--yellow)}
#cos-menu #career .row .g{color:var(--yellow)}
#cos-menu #career .cab{padding:2vh 2.8vh 2.4vh}
#cos-menu #career .shelf{flex:1;display:flex;align-items:flex-end;gap:1.2vh;margin-top:1vh;padding-bottom:1.4vh;position:relative;min-height:0}
#cos-menu #career .shelf::after{content:'';position:absolute;left:-2.8vh;right:-2.8vh;bottom:0;height:.9vh;background:linear-gradient(90deg,rgba(255,210,63,.15),rgba(255,210,63,.6),rgba(255,210,63,.15));box-shadow:0 .4vh 1.6vh rgba(255,210,63,.35)}
#cos-menu #career .tr{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;position:relative;padding:0 .4vh}
#cos-menu #career .tr .ico{position:relative;height:64%;display:flex;align-items:flex-end}
#cos-menu #career .tr svg{height:100%;width:auto;filter:drop-shadow(0 .8vh 1.2vh rgba(0,0,0,.5))}
#cos-menu #career .tr .tn{font-family:'BC';font-weight:700;font-style:italic;font-size:2.1vh;letter-spacing:.06em;margin-top:1vh;white-space:nowrap}
#cos-menu #career .tr .ts{font-family:'BC';font-weight:600;font-size:1.6vh;letter-spacing:.18em;color:var(--muted);margin-top:.4vh;white-space:nowrap}
#cos-menu #career .tr .cnt{position:absolute;right:-2.2vh;top:-.4vh;min-width:3.4vh;height:3.4vh;padding:0 .8vh;background:var(--yellow);color:#07112b;display:grid;place-items:center;font-family:'BC';font-weight:900;font-style:italic;font-size:2.2vh;clip-path:polygon(.5vh 0,100% 0,calc(100% - .5vh) 100%,0 100%)}
#cos-menu #career .tr.empty{opacity:.28}
#cos-menu #career .tr.empty svg{filter:grayscale(1)}

/* ===== REPLAY ===== */
#cos-menu .scr{position:fixed;inset:0}
#cos-menu #replay .bg{position:absolute;inset:-4%;background:
  radial-gradient(70% 55% at 50% 40%, rgba(47,107,255,.30), transparent 70%),
  radial-gradient(40% 35% at 0% 0%, rgba(255,255,240,.16), transparent 70%),
  radial-gradient(40% 35% at 100% 0%, rgba(255,255,240,.16), transparent 70%),
  linear-gradient(180deg,#0b1940 0%,#071029 55%,#040a1c 100%)}
#cos-menu #replay .bokeh{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(circle at 10% 18%, rgba(255,255,240,.16) 0 3vh, transparent 7vh),radial-gradient(circle at 90% 12%, rgba(255,255,240,.13) 0 3vh, transparent 8vh),
  radial-gradient(circle at 62% 8%, rgba(160,190,255,.12) 0 2vh, transparent 6vh),radial-gradient(circle at 22% 60%, rgba(160,190,255,.09) 0 4vh, transparent 9vh),
  radial-gradient(circle at 78% 70%, rgba(255,226,140,.07) 0 4vh, transparent 10vh),radial-gradient(circle at 45% 35%, rgba(160,190,255,.08) 0 3vh, transparent 8vh)}
#cos-menu #replay .pitch{position:absolute;left:-10%;right:-10%;bottom:-8%;height:48%;transform-origin:50% 100%;transform:perspective(70vh) rotateX(58deg);opacity:.45;
  background:radial-gradient(ellipse 13% 22% at 50% 12%, transparent 96%, rgba(140,180,255,.55) 97%, rgba(140,180,255,.55) 99%, transparent 100%),
  linear-gradient(90deg, transparent calc(50% - 1px), rgba(140,180,255,.55) calc(50% - 1px), rgba(140,180,255,.55) calc(50% + 1px), transparent calc(50% + 1px)),
  linear-gradient(180deg, rgba(140,180,255,.55) 0 2px, transparent 2px),
  repeating-linear-gradient(90deg, rgba(47,107,255,.10) 0 6%, rgba(47,107,255,.04) 6% 12%);
  -webkit-mask:linear-gradient(to top,#000 10%,transparent 95%);mask:linear-gradient(to top,#000 10%,transparent 95%)}
#cos-menu #replay .streaks{position:absolute;inset:0;overflow:hidden}
#cos-menu #replay .streaks i{position:absolute;top:-30%;height:160%;width:14vw;transform:rotate(24deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent)}
#cos-menu #replay .streaks i:nth-child(1){left:8%}
#cos-menu #replay .streaks i:nth-child(2){left:52%;width:8vw}
#cos-menu #replay .streaks i:nth-child(3){left:78%;width:20vw}
#cos-menu #replay .grain{position:absolute;inset:0;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
#cos-menu #replay .vig{position:absolute;inset:0;background:radial-gradient(120% 95% at 50% 45%, transparent 50%, rgba(2,5,15,.8) 100%)}
#cos-menu #replay .glass{background:linear-gradient(180deg,var(--navy-2),var(--navy));border:1px solid var(--line);box-shadow:0 1.4vh 3vh rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12)}
#cos-menu #replay .foot{position:absolute;left:var(--L);right:var(--R);bottom:max(4vh,env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between}
#cos-menu #replay .online{display:flex;align-items:center;gap:1.2vh;font-family:'BC';font-weight:700;font-style:italic;font-size:3.2vh;height:8vh;padding:0 2.4vh;border-radius:99px}
#cos-menu #replay .online i{width:1.6vh;height:1.6vh;border-radius:50%;background:var(--green);box-shadow:0 0 1.4vh var(--green)}
#cos-menu #replay .online small{font-family:'BC';font-weight:600;font-style:normal;font-size:2.2vh;letter-spacing:.2em;color:var(--muted)}
#cos-menu #replay .ver{font-family:'BC';font-weight:600;font-size:2.2vh;letter-spacing:.24em;color:#5d6f99}
#cos-menu #replay .chat{display:flex;align-items:center;gap:1.4vh;height:8vh;padding:0 2.6vh;border-radius:99px;font-family:'BC';font-weight:700;font-style:italic;font-size:3.2vh;letter-spacing:.08em}
#cos-menu #replay .chat b{min-width:3.4vh;height:3.4vh;border-radius:99px;background:var(--red);font-family:'BC';font-weight:900;font-size:2.2vh;display:grid;place-items:center;padding:0 .8vh;font-style:normal}
#cos-menu #replay .topl{position:absolute;left:var(--L);top:var(--T)}
#cos-menu #replay .topr{position:absolute;right:var(--R);top:var(--T);display:flex;gap:1.4vh;align-items:center}
#cos-menu #replay .back{height:9vh;display:flex;align-items:center;gap:1.2vh;padding:0 2.6vh 0 2vh;border-radius:1.6vh;font-family:'BC';font-weight:700;font-style:italic;font-size:3.2vh;letter-spacing:.1em}
#cos-menu #replay .back::before{content:'';width:1.6vh;height:1.6vh;border-left:.4vh solid var(--text);border-bottom:.4vh solid var(--text);transform:rotate(45deg);margin-right:.4vh}
#cos-menu #replay .chip{height:9vh;display:flex;align-items:center;gap:1.6vh;padding:0 2.4vh;border-radius:1.6vh}
#cos-menu #replay .chip .k{font-family:'BC';font-weight:600;font-size:2.1vh;letter-spacing:.3em;color:var(--muted)}
#cos-menu #replay .chip .v{font-family:'BC';font-weight:700;font-style:italic;font-size:3vh}
#cos-menu #replay .chip .sep{width:1px;height:4vh;background:var(--line)}
#cos-menu #replay .pan{position:relative;display:flex;flex-direction:column;overflow:hidden;
  clip-path:polygon(2.4vh 0,100% 0,calc(100% - 2.4vh) 100%,0 100%);background:linear-gradient(180deg,rgba(14,30,72,.9),rgba(8,18,46,.75))}
#cos-menu #replay .pan::after{content:'';position:absolute;left:0;right:0;bottom:0;height:.9vh;background:var(--c);box-shadow:0 0 2vh var(--c)}
#cos-menu #replay .ph{display:flex;align-items:flex-end;justify-content:space-between}
#cos-menu #replay .ph .h{font-family:'BC';font-weight:900;font-style:italic;font-size:4.6vh;line-height:.9}
#cos-menu #replay .ph .s{font-size:2.2vh;color:#b9c7e8;margin-top:.6vh}
#cos-menu #replay .ph .more{display:flex;align-items:center;gap:1.2vh;font-family:'BC';font-weight:700;font-style:italic;font-size:2.8vh}
#cos-menu #replay .ph .more small{font-family:'BC';font-weight:600;font-style:normal;font-size:2vh;letter-spacing:.22em;color:var(--muted)}
#cos-menu #replay .wm{position:absolute;left:50%;top:var(--T);transform:translateX(-50%);height:9vh;display:flex;align-items:center;font-family:'BC';font-weight:900;font-style:italic;line-height:.84}
#cos-menu #replay .wm .l{font-size:4.6vh;white-space:nowrap;background:linear-gradient(180deg,#ffffff 0%,#dfe8ff 60%,#9fb6ee 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
#cos-menu #replay .wm .of{background:linear-gradient(180deg,#ffe27a,var(--yellow) 55%,#e8aa00);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em}
#cos-menu #replay .kick{font-family:'BC';font-weight:600;font-size:2.4vh;letter-spacing:.34em;color:var(--muted);text-transform:uppercase}
#cos-menu #replay .head{position:absolute;left:var(--L);top:18vh}
#cos-menu #replay .head .t{font-family:'BC';font-weight:900;font-style:italic;font-size:13vh;line-height:.85;margin-top:1.4vh}
#cos-menu #replay .head .t em{font-style:inherit;color:var(--purple)}
#cos-menu #replay .head .ul{width:14vh;height:.7vh;background:var(--purple);border-radius:1vh;box-shadow:0 0 2vh rgba(155,91,255,.6);margin:2vh 0}
#cos-menu #replay .head .d{font-size:2.7vh;color:#b9c7e8;line-height:1.4;max-width:24vw}
#cos-menu #replay .head .st{display:flex;gap:3vh;margin-top:2.4vh}
#cos-menu #replay .head .st b{display:block;font-family:'BC';font-weight:900;font-style:italic;font-size:4.4vh;line-height:.9}
#cos-menu #replay .head .st span{display:block;font-family:'BC';font-weight:600;font-size:1.8vh;letter-spacing:.22em;color:var(--muted);margin-top:.5vh}
#cos-menu #replay .cards{position:absolute;right:var(--R);top:17vh;bottom:16vh;width:62vw;display:flex;gap:1.4vh}
#cos-menu #replay .cards .pan{flex:1;justify-content:flex-end;padding:2.6vh 2.8vh}
#cos-menu #replay .cards .pan::before{content:'';position:absolute;left:0;right:0;top:0;height:50%;background:radial-gradient(90% 100% at 50% 0%, color-mix(in srgb,var(--c) 32%,transparent), transparent 75%)}
#cos-menu #replay .cards .pan .n{position:absolute;right:1.8vh;top:1.6vh;font-family:'BC';font-weight:900;font-style:italic;font-size:11vh;line-height:.8;color:rgba(255,255,255,.06)}
#cos-menu #replay .cards .pan .ic{position:absolute;left:2.8vh;top:2.4vh;width:8vh;height:8vh}
#cos-menu #replay .cards .pan .ic svg{width:100%;height:100%;filter:drop-shadow(0 .6vh 1vh rgba(0,0,0,.4))}
#cos-menu #replay .cards .pan .last{display:flex;align-items:center;gap:1.4vh;margin-bottom:2.2vh;padding:1.2vh 1.4vh;background:rgba(4,10,28,.55);border:1px solid var(--line);clip-path:polygon(.8vh 0,100% 0,calc(100% - .8vh) 100%,0 100%)}
#cos-menu #replay .cards .pan .last .pl{width:3.6vh;height:3.6vh;flex:none;background:var(--c);display:grid;place-items:center;clip-path:polygon(.5vh 0,100% 0,calc(100% - .5vh) 100%,0 100%)}
#cos-menu #replay .cards .pan .last .pl::after{content:'';border-left:1.3vh solid #07112b;border-top:.9vh solid transparent;border-bottom:.9vh solid transparent;margin-left:.3vh}
#cos-menu #replay .cards .pan .last .k{font-family:'BC';font-weight:600;font-size:1.7vh;letter-spacing:.22em;color:var(--muted)}
#cos-menu #replay .cards .pan .last .v{font-family:'BC';font-weight:700;font-style:italic;font-size:2.4vh;margin-top:.3vh;white-space:nowrap}
#cos-menu #replay .cards .pan .t{font-family:'BC';font-weight:900;font-style:italic;font-size:5.8vh;line-height:.9;text-transform:uppercase;min-height:10.5vh;display:flex;align-items:flex-end}
#cos-menu #replay .cards .pan .x{font-size:2.3vh;color:#b9c7e8;line-height:1.35;margin-top:1.2vh;font-family:'Barlow';font-weight:500}
#cos-menu #replay .cards .pan .meta{display:flex;align-items:center;justify-content:space-between;margin-top:2vh;padding-top:1.8vh;border-top:1px solid var(--line);font-family:'BC';font-weight:600;font-size:2vh;letter-spacing:.22em;color:var(--muted)}
#cos-menu #replay .cards .pan .meta b{font-family:'BC';font-weight:900;font-style:italic;font-size:2.8vh;color:var(--text);letter-spacing:.04em;margin-right:.8vh}
#cos-menu #replay .cards .pan .meta .arr{width:4.6vh;height:4.6vh;border-radius:50%;border:1px solid var(--line);position:relative}
#cos-menu #replay .cards .pan .meta .arr::after{content:'';position:absolute;left:50%;top:50%;width:1.2vh;height:1.2vh;border-right:.35vh solid currentColor;border-top:.35vh solid currentColor;transform:translate(-65%,-50%) rotate(45deg)}
#cos-menu #replay .cards .pan .pop{position:absolute;left:2.8vh;top:11.6vh;font-family:'BC';font-weight:700;font-style:italic;font-size:1.9vh;letter-spacing:.16em;color:#07112b;background:var(--yellow);padding:.5vh 1.1vh;border-radius:.6vh}
#cos-menu #replay .cards .pan .pop i{display:inline-block;width:1.1vh;height:1.1vh;border-radius:50%;background:var(--red);margin-right:.7vh;vertical-align:.1em;box-shadow:0 0 .8vh var(--red)}

/* ===== SETTINGS ===== */
#cos-menu .scr{position:fixed;inset:0}
#cos-menu #settings .bg{position:absolute;inset:-4%;background:
  radial-gradient(70% 55% at 50% 40%, rgba(47,107,255,.30), transparent 70%),
  radial-gradient(40% 35% at 0% 0%, rgba(255,255,240,.16), transparent 70%),
  radial-gradient(40% 35% at 100% 0%, rgba(255,255,240,.16), transparent 70%),
  linear-gradient(180deg,#0b1940 0%,#071029 55%,#040a1c 100%)}
#cos-menu #settings .bokeh{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(circle at 10% 18%, rgba(255,255,240,.16) 0 3vh, transparent 7vh),radial-gradient(circle at 90% 12%, rgba(255,255,240,.13) 0 3vh, transparent 8vh),
  radial-gradient(circle at 62% 8%, rgba(160,190,255,.12) 0 2vh, transparent 6vh),radial-gradient(circle at 22% 60%, rgba(160,190,255,.09) 0 4vh, transparent 9vh),
  radial-gradient(circle at 78% 70%, rgba(255,226,140,.07) 0 4vh, transparent 10vh),radial-gradient(circle at 45% 35%, rgba(160,190,255,.08) 0 3vh, transparent 8vh)}
#cos-menu #settings .pitch{position:absolute;left:-10%;right:-10%;bottom:-8%;height:48%;transform-origin:50% 100%;transform:perspective(70vh) rotateX(58deg);opacity:.45;
  background:radial-gradient(ellipse 13% 22% at 50% 12%, transparent 96%, rgba(140,180,255,.55) 97%, rgba(140,180,255,.55) 99%, transparent 100%),
  linear-gradient(90deg, transparent calc(50% - 1px), rgba(140,180,255,.55) calc(50% - 1px), rgba(140,180,255,.55) calc(50% + 1px), transparent calc(50% + 1px)),
  linear-gradient(180deg, rgba(140,180,255,.55) 0 2px, transparent 2px),
  repeating-linear-gradient(90deg, rgba(47,107,255,.10) 0 6%, rgba(47,107,255,.04) 6% 12%);
  -webkit-mask:linear-gradient(to top,#000 10%,transparent 95%);mask:linear-gradient(to top,#000 10%,transparent 95%)}
#cos-menu #settings .streaks{position:absolute;inset:0;overflow:hidden}
#cos-menu #settings .streaks i{position:absolute;top:-30%;height:160%;width:14vw;transform:rotate(24deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent)}
#cos-menu #settings .streaks i:nth-child(1){left:8%}
#cos-menu #settings .streaks i:nth-child(2){left:52%;width:8vw}
#cos-menu #settings .streaks i:nth-child(3){left:78%;width:20vw}
#cos-menu #settings .grain{position:absolute;inset:0;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
#cos-menu #settings .vig{position:absolute;inset:0;background:radial-gradient(120% 95% at 50% 45%, transparent 50%, rgba(2,5,15,.8) 100%)}
#cos-menu #settings .glass{background:linear-gradient(180deg,var(--navy-2),var(--navy));border:1px solid var(--line);box-shadow:0 1.4vh 3vh rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12)}
#cos-menu #settings .foot{position:absolute;left:var(--L);right:var(--R);bottom:max(4vh,env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between}
#cos-menu #settings .online{display:flex;align-items:center;gap:1.2vh;font-family:'BC';font-weight:700;font-style:italic;font-size:3.2vh;height:8vh;padding:0 2.4vh;border-radius:99px}
#cos-menu #settings .online i{width:1.6vh;height:1.6vh;border-radius:50%;background:var(--green);box-shadow:0 0 1.4vh var(--green)}
#cos-menu #settings .online small{font-family:'BC';font-weight:600;font-style:normal;font-size:2.2vh;letter-spacing:.2em;color:var(--muted)}
#cos-menu #settings .ver{font-family:'BC';font-weight:600;font-size:2.2vh;letter-spacing:.24em;color:#5d6f99}
#cos-menu #settings .chat{display:flex;align-items:center;gap:1.4vh;height:8vh;padding:0 2.6vh;border-radius:99px;font-family:'BC';font-weight:700;font-style:italic;font-size:3.2vh;letter-spacing:.08em}
#cos-menu #settings .chat b{min-width:3.4vh;height:3.4vh;border-radius:99px;background:var(--red);font-family:'BC';font-weight:900;font-size:2.2vh;display:grid;place-items:center;padding:0 .8vh;font-style:normal}
#cos-menu #settings .topl{position:absolute;left:var(--L);top:var(--T)}
#cos-menu #settings .topr{position:absolute;right:var(--R);top:var(--T);display:flex;gap:1.4vh;align-items:center}
#cos-menu #settings .back{height:9vh;display:flex;align-items:center;gap:1.2vh;padding:0 2.6vh 0 2vh;border-radius:1.6vh;font-family:'BC';font-weight:700;font-style:italic;font-size:3.2vh;letter-spacing:.1em}
#cos-menu #settings .back::before{content:'';width:1.6vh;height:1.6vh;border-left:.4vh solid var(--text);border-bottom:.4vh solid var(--text);transform:rotate(45deg);margin-right:.4vh}
#cos-menu #settings .chip{height:9vh;display:flex;align-items:center;gap:1.6vh;padding:0 2.4vh;border-radius:1.6vh}
#cos-menu #settings .chip .k{font-family:'BC';font-weight:600;font-size:2.1vh;letter-spacing:.3em;color:var(--muted)}
#cos-menu #settings .chip .v{font-family:'BC';font-weight:700;font-style:italic;font-size:3vh}
#cos-menu #settings .chip .sep{width:1px;height:4vh;background:var(--line)}
#cos-menu #settings .pan{position:relative;display:flex;flex-direction:column;overflow:hidden;
  clip-path:polygon(2.4vh 0,100% 0,calc(100% - 2.4vh) 100%,0 100%);background:linear-gradient(180deg,rgba(14,30,72,.9),rgba(8,18,46,.75))}
#cos-menu #settings .pan::after{content:'';position:absolute;left:0;right:0;bottom:0;height:.9vh;background:var(--c);box-shadow:0 0 2vh var(--c)}
#cos-menu #settings .ph{display:flex;align-items:flex-end;justify-content:space-between}
#cos-menu #settings .ph .h{font-family:'BC';font-weight:900;font-style:italic;font-size:4.6vh;line-height:.9}
#cos-menu #settings .ph .s{font-size:2.2vh;color:#b9c7e8;margin-top:.6vh}
#cos-menu #settings .ph .more{display:flex;align-items:center;gap:1.2vh;font-family:'BC';font-weight:700;font-style:italic;font-size:2.8vh}
#cos-menu #settings .ph .more small{font-family:'BC';font-weight:600;font-style:normal;font-size:2vh;letter-spacing:.22em;color:var(--muted)}
#cos-menu #settings .head{position:absolute;left:calc(var(--L) + 22vh);top:var(--T);height:9vh;display:flex;align-items:center;gap:2vh}
#cos-menu #settings .head .bar{width:2vh;height:8vh;background:var(--yellow);transform:skewX(-14deg);box-shadow:0 0 2vh rgba(255,210,63,.6);border-radius:2px}
#cos-menu #settings .head .t{font-family:'BC';font-weight:900;font-style:italic;font-size:6vh;line-height:.9}
#cos-menu #settings .head .d{font-family:'BC';font-weight:600;font-size:2.1vh;letter-spacing:.26em;color:var(--muted);margin-top:.5vh}
#cos-menu #settings .saved{display:flex;align-items:center;gap:1.2vh;font-family:'BC';font-weight:600;font-size:2.1vh;letter-spacing:.26em;color:var(--muted)}
#cos-menu #settings .saved i{width:1.4vh;height:1.4vh;border-radius:50%;background:var(--green);box-shadow:0 0 1.2vh var(--green)}
#cos-menu #settings .grid{position:absolute;left:var(--L);right:var(--R);top:17.5vh;bottom:15.5vh;display:grid;grid-template-columns:24vw 1fr;gap:1.4vh}
#cos-menu #settings .nav{display:flex;flex-direction:column;gap:1.2vh}
#cos-menu #settings .nav .it{flex:1;display:flex;align-items:center;gap:1.8vh;padding:0 2.6vh;clip-path:polygon(1.6vh 0,100% 0,calc(100% - 1.6vh) 100%,0 100%);background:linear-gradient(180deg,rgba(14,30,72,.9),rgba(8,18,46,.75));position:relative;cursor:pointer}
#cos-menu #settings .nav .it::after{content:'';position:absolute;right:2.8vh;top:50%;width:1.3vh;height:1.3vh;border-right:.35vh solid var(--muted);border-top:.35vh solid var(--muted);transform:translateY(-50%) rotate(45deg)}
#cos-menu #settings .nav .it svg{width:4.2vh;height:4.2vh;flex:none;stroke:var(--muted);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#cos-menu #settings .nav .it .l{font-family:'BC';font-weight:900;font-style:italic;font-size:3.8vh;letter-spacing:.02em}
#cos-menu #settings .nav .it .s{font-family:'BC';font-weight:600;font-size:1.7vh;letter-spacing:.22em;color:var(--muted);margin-top:.4vh}
#cos-menu #settings .nav .it.on{background:linear-gradient(100deg,#ffe58a,var(--yellow) 45%,#f2b400);color:#07112b}
#cos-menu #settings .nav .it.on svg{stroke:#07112b}
#cos-menu #settings .nav .it.on .s{color:#07112b;opacity:.65}
#cos-menu #settings .nav .it.on::after{border-color:#07112b}
#cos-menu #settings .pan{padding:2.2vh 3vh 2.4vh}
#cos-menu #settings .page{display:none;flex:1;flex-direction:column;min-height:0}
#cos-menu #settings .page.on{display:flex}
#cos-menu #settings .ph .reset{display:flex;align-items:center;gap:1vh;height:5.2vh;padding:0 1.8vh;border:1px solid var(--line);background:rgba(255,255,255,.05);font-family:'BC';font-weight:700;font-style:italic;font-size:2.2vh;letter-spacing:.1em;color:#b9c7e8;clip-path:polygon(.8vh 0,100% 0,calc(100% - .8vh) 100%,0 100%)}
#cos-menu #settings .rows{flex:1;display:flex;flex-direction:column;justify-content:center;margin-top:.6vh}
#cos-menu #settings .row{display:flex;align-items:center;gap:2vh;padding:1.6vh 0;border-top:1px solid rgba(255,255,255,.08)}
#cos-menu #settings .row:first-child{border-top:0}
#cos-menu #settings .row .ic{width:4.6vh;height:4.6vh;flex:none;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid var(--line);clip-path:polygon(.6vh 0,100% 0,calc(100% - .6vh) 100%,0 100%)}
#cos-menu #settings .row .ic svg{width:2.8vh;height:2.8vh;stroke:var(--yellow);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#cos-menu #settings .row .tx{flex:1;min-width:0}
#cos-menu #settings .row .tx b{display:block;font-family:'BC';font-weight:700;font-style:italic;font-size:3.1vh;letter-spacing:.02em}
#cos-menu #settings .row .tx span{display:block;font-size:2.1vh;color:#b9c7e8;margin-top:.4vh}
#cos-menu #settings .tg{width:8.4vh;height:4.6vh;border-radius:99px;background:rgba(255,255,255,.12);border:1px solid var(--line);position:relative;flex:none;transition:.15s}
#cos-menu #settings .tg::after{content:'';position:absolute;top:.4vh;left:.4vh;width:3.6vh;height:3.6vh;border-radius:50%;background:#fff;box-shadow:0 .3vh .8vh rgba(0,0,0,.4);transition:.15s}
#cos-menu #settings .tg.on{background:var(--green);border-color:transparent;box-shadow:0 0 1.6vh rgba(63,209,106,.5)}
#cos-menu #settings .tg.on::after{left:4.2vh}
#cos-menu #settings .sl{display:flex;align-items:center;gap:1.8vh;width:34vh;flex:none}
#cos-menu #settings .sl .tr{flex:1;height:.9vh;border-radius:1vh;background:rgba(255,255,255,.12);position:relative}
#cos-menu #settings .sl .tr i{position:absolute;left:0;top:0;bottom:0;border-radius:1vh;background:var(--yellow);box-shadow:0 0 1.2vh rgba(255,210,63,.5)}
#cos-menu #settings .sl .tr b{position:absolute;top:50%;width:3.4vh;height:3.4vh;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 .3vh .8vh rgba(0,0,0,.45)}
#cos-menu #settings .sl .v{width:7vh;text-align:right;font-family:'BC';font-weight:700;font-style:italic;font-size:3vh}
#cos-menu #settings .langs{flex:1;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:1.2vh;margin-top:1.6vh}
#cos-menu #settings .lang{display:flex;align-items:center;gap:1.6vh;padding:0 1.8vh;background:rgba(255,255,255,.05);border:1px solid var(--line);clip-path:polygon(1vh 0,100% 0,calc(100% - 1vh) 100%,0 100%);cursor:pointer}
#cos-menu #settings .lang .cd{width:5vh;height:5vh;flex:none;display:grid;place-items:center;background:rgba(255,255,255,.08);font-family:'BC';font-weight:900;font-style:italic;font-size:2.4vh;clip-path:polygon(.6vh 0,100% 0,calc(100% - .6vh) 100%,0 100%)}
#cos-menu #settings .lang b{display:block;font-family:'BC';font-weight:700;font-style:italic;font-size:2.9vh}
#cos-menu #settings .lang span{display:block;font-family:'BC';font-weight:600;font-size:1.7vh;letter-spacing:.2em;color:var(--muted);margin-top:.4vh}
#cos-menu #settings .lang.on{background:linear-gradient(100deg,#ffe58a,var(--yellow) 45%,#f2b400);border-color:transparent;color:#07112b}
#cos-menu #settings .lang.on .cd{background:#07112b;color:var(--yellow)}
#cos-menu #settings .lang.on span{color:#07112b;opacity:.65}
#cos-menu #settings .fields{flex:1;display:grid;grid-template-columns:auto 1fr;gap:2vh;margin-top:1.4vh;min-height:0}
#cos-menu #settings .fprev{position:relative;height:100%;aspect-ratio:1/0.9;border:1px solid var(--line);box-shadow:0 1vh 2.4vh rgba(0,0,0,.4);overflow:hidden;clip-path:polygon(1.2vh 0,100% 0,calc(100% - 1.2vh) 100%,0 100%)}
#cos-menu #settings .fprev canvas{width:100%;height:100%;display:block}
#cos-menu #settings .fprev .cap{position:absolute;left:0;right:0;bottom:0;padding:1vh 2vh;background:linear-gradient(0deg,rgba(4,10,28,.85),transparent);font-family:'BC';font-weight:700;font-style:italic;font-size:2.6vh}
#cos-menu #settings .fprev .cap small{display:block;font-family:'BC';font-weight:600;font-style:normal;font-size:1.7vh;letter-spacing:.2em;color:var(--muted);margin-top:.3vh}
#cos-menu #settings .flist{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:1vh;min-height:0}
#cos-menu #settings .fo{display:flex;align-items:center;gap:1.4vh;padding:0 1.4vh;background:rgba(255,255,255,.05);border:1px solid var(--line);clip-path:polygon(.9vh 0,100% 0,calc(100% - .9vh) 100%,0 100%);cursor:pointer}
#cos-menu #settings .fo canvas{width:6vh;height:5.4vh;flex:none;border:1px solid rgba(0,0,0,.4)}
#cos-menu #settings .fo b{display:block;font-family:'BC';font-weight:700;font-style:italic;font-size:2.6vh}
#cos-menu #settings .fo span{display:block;font-size:1.8vh;color:#b9c7e8;margin-top:.3vh;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cos-menu #settings .fo.on{background:linear-gradient(100deg,#ffe58a,var(--yellow) 45%,#f2b400);border-color:transparent;color:#07112b}
#cos-menu #settings .fo.on span{color:#07112b;opacity:.7}

/* ===== SHOP ===== */
#cos-menu .scr{position:fixed;inset:0}
#cos-menu #shop .bg{position:absolute;inset:-4%;background:
  radial-gradient(70% 55% at 50% 40%, rgba(47,107,255,.30), transparent 70%),
  radial-gradient(40% 35% at 0% 0%, rgba(255,255,240,.16), transparent 70%),
  radial-gradient(40% 35% at 100% 0%, rgba(255,255,240,.16), transparent 70%),
  linear-gradient(180deg,#0b1940 0%,#071029 55%,#040a1c 100%)}
#cos-menu #shop .bokeh{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(circle at 10% 18%, rgba(255,255,240,.16) 0 3vh, transparent 7vh),radial-gradient(circle at 90% 12%, rgba(255,255,240,.13) 0 3vh, transparent 8vh),
  radial-gradient(circle at 62% 8%, rgba(160,190,255,.12) 0 2vh, transparent 6vh),radial-gradient(circle at 22% 60%, rgba(160,190,255,.09) 0 4vh, transparent 9vh),
  radial-gradient(circle at 78% 70%, rgba(255,226,140,.07) 0 4vh, transparent 10vh),radial-gradient(circle at 45% 35%, rgba(160,190,255,.08) 0 3vh, transparent 8vh)}
#cos-menu #shop .pitch{position:absolute;left:-10%;right:-10%;bottom:-8%;height:48%;transform-origin:50% 100%;transform:perspective(70vh) rotateX(58deg);opacity:.45;
  background:radial-gradient(ellipse 13% 22% at 50% 12%, transparent 96%, rgba(140,180,255,.55) 97%, rgba(140,180,255,.55) 99%, transparent 100%),
  linear-gradient(90deg, transparent calc(50% - 1px), rgba(140,180,255,.55) calc(50% - 1px), rgba(140,180,255,.55) calc(50% + 1px), transparent calc(50% + 1px)),
  linear-gradient(180deg, rgba(140,180,255,.55) 0 2px, transparent 2px),
  repeating-linear-gradient(90deg, rgba(47,107,255,.10) 0 6%, rgba(47,107,255,.04) 6% 12%);
  -webkit-mask:linear-gradient(to top,#000 10%,transparent 95%);mask:linear-gradient(to top,#000 10%,transparent 95%)}
#cos-menu #shop .streaks{position:absolute;inset:0;overflow:hidden}
#cos-menu #shop .streaks i{position:absolute;top:-30%;height:160%;width:14vw;transform:rotate(24deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent)}
#cos-menu #shop .streaks i:nth-child(1){left:8%}
#cos-menu #shop .streaks i:nth-child(2){left:52%;width:8vw}
#cos-menu #shop .streaks i:nth-child(3){left:78%;width:20vw}
#cos-menu #shop .grain{position:absolute;inset:0;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
#cos-menu #shop .vig{position:absolute;inset:0;background:radial-gradient(120% 95% at 50% 45%, transparent 50%, rgba(2,5,15,.8) 100%)}
#cos-menu #shop .glass{background:linear-gradient(180deg,var(--navy-2),var(--navy));border:1px solid var(--line);box-shadow:0 1.4vh 3vh rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12)}
#cos-menu #shop .foot{position:absolute;left:var(--L);right:var(--R);bottom:max(4vh,env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between}
#cos-menu #shop .online{display:flex;align-items:center;gap:1.2vh;font-family:'BC';font-weight:700;font-style:italic;font-size:3.2vh;height:8vh;padding:0 2.4vh;border-radius:99px}
#cos-menu #shop .online i{width:1.6vh;height:1.6vh;border-radius:50%;background:var(--green);box-shadow:0 0 1.4vh var(--green)}
#cos-menu #shop .online small{font-family:'BC';font-weight:600;font-style:normal;font-size:2.2vh;letter-spacing:.2em;color:var(--muted)}
#cos-menu #shop .ver{font-family:'BC';font-weight:600;font-size:2.2vh;letter-spacing:.24em;color:#5d6f99}
#cos-menu #shop .chat{display:flex;align-items:center;gap:1.4vh;height:8vh;padding:0 2.6vh;border-radius:99px;font-family:'BC';font-weight:700;font-style:italic;font-size:3.2vh;letter-spacing:.08em}
#cos-menu #shop .chat b{min-width:3.4vh;height:3.4vh;border-radius:99px;background:var(--red);font-family:'BC';font-weight:900;font-size:2.2vh;display:grid;place-items:center;padding:0 .8vh;font-style:normal}
#cos-menu #shop .topl{position:absolute;left:var(--L);top:var(--T)}
#cos-menu #shop .topr{position:absolute;right:var(--R);top:var(--T);display:flex;gap:1.4vh;align-items:center}
#cos-menu #shop .back{height:9vh;display:flex;align-items:center;gap:1.2vh;padding:0 2.6vh 0 2vh;border-radius:1.6vh;font-family:'BC';font-weight:700;font-style:italic;font-size:3.2vh;letter-spacing:.1em}
#cos-menu #shop .back::before{content:'';width:1.6vh;height:1.6vh;border-left:.4vh solid var(--text);border-bottom:.4vh solid var(--text);transform:rotate(45deg);margin-right:.4vh}
#cos-menu #shop .chip{height:9vh;display:flex;align-items:center;gap:1.6vh;padding:0 2.4vh;border-radius:1.6vh}
#cos-menu #shop .chip .k{font-family:'BC';font-weight:600;font-size:2.1vh;letter-spacing:.3em;color:var(--muted)}
#cos-menu #shop .chip .v{font-family:'BC';font-weight:700;font-style:italic;font-size:3vh}
#cos-menu #shop .chip .sep{width:1px;height:4vh;background:var(--line)}
#cos-menu #shop .pan{position:relative;display:flex;flex-direction:column;overflow:hidden;
  clip-path:polygon(2.4vh 0,100% 0,calc(100% - 2.4vh) 100%,0 100%);background:linear-gradient(180deg,rgba(14,30,72,.9),rgba(8,18,46,.75))}
#cos-menu #shop .pan::after{content:'';position:absolute;left:0;right:0;bottom:0;height:.9vh;background:var(--c);box-shadow:0 0 2vh var(--c)}
#cos-menu #shop .ph{display:flex;align-items:flex-end;justify-content:space-between}
#cos-menu #shop .ph .h{font-family:'BC';font-weight:900;font-style:italic;font-size:4.6vh;line-height:.9}
#cos-menu #shop .ph .s{font-size:2.2vh;color:#b9c7e8;margin-top:.6vh}
#cos-menu #shop .ph .more{display:flex;align-items:center;gap:1.2vh;font-family:'BC';font-weight:700;font-style:italic;font-size:2.8vh}
#cos-menu #shop .ph .more small{font-family:'BC';font-weight:600;font-style:normal;font-size:2vh;letter-spacing:.22em;color:var(--muted)}
#cos-menu #shop .head{position:absolute;left:calc(var(--L) + 22vh);top:var(--T);height:9vh;display:flex;align-items:center;gap:2vh}
#cos-menu #shop .head .bar{width:2vh;height:8vh;background:var(--orange);transform:skewX(-14deg);box-shadow:0 0 2vh rgba(255,138,61,.6);border-radius:2px}
#cos-menu #shop .head .t{font-family:'BC';font-weight:900;font-style:italic;font-size:6vh;line-height:.9}
#cos-menu #shop .head .d{font-family:'BC';font-weight:600;font-size:2.1vh;letter-spacing:.26em;color:var(--muted);margin-top:.5vh}
#cos-menu #shop .coins{height:9vh;display:flex;align-items:center;gap:1.2vh;padding:0 1.2vh 0 2vh;border-radius:1.6vh}
#cos-menu #shop .coins i{width:3vh;height:3vh;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff2a8,#ffd23f 45%,#c98a00);box-shadow:0 0 1.2vh rgba(255,210,63,.6)}
#cos-menu #shop .coins b{font-family:'BC';font-weight:900;font-style:italic;font-size:3.2vh;color:var(--yellow)}
#cos-menu #shop .coins .plus{width:4.4vh;height:4.4vh;display:grid;place-items:center;background:var(--yellow);color:#07112b;font-family:'BC';font-weight:900;font-size:3vh;clip-path:polygon(.5vh 0,100% 0,calc(100% - .5vh) 100%,0 100%);margin-left:.6vh}
#cos-menu #shop .timer{height:9vh;display:flex;align-items:center;gap:1.4vh;padding:0 2.2vh;border-radius:1.6vh;font-family:'BC';font-weight:600;font-size:2vh;letter-spacing:.24em;color:var(--muted)}
#cos-menu #shop .timer b{font-family:'BC';font-weight:700;font-style:italic;font-size:2.8vh;color:var(--text);letter-spacing:.04em}
#cos-menu #shop .grid{position:absolute;left:var(--L);right:var(--R);top:17.5vh;bottom:15.5vh;display:grid;grid-template-columns:17vw 1fr;gap:1.4vh}
#cos-menu #shop .nav{display:flex;flex-direction:column;gap:1vh}
#cos-menu #shop .nav .it{flex:1;display:flex;align-items:center;gap:1.6vh;padding:0 2.4vh;clip-path:polygon(1.4vh 0,100% 0,calc(100% - 1.4vh) 100%,0 100%);background:linear-gradient(180deg,rgba(14,30,72,.9),rgba(8,18,46,.75));cursor:pointer;position:relative}
#cos-menu #shop .nav .it .l{font-family:'BC';font-weight:900;font-style:italic;font-size:3.2vh}
#cos-menu #shop .nav .it .n{margin-left:auto;font-family:'BC';font-weight:600;font-size:1.8vh;letter-spacing:.2em;color:var(--muted)}
#cos-menu #shop .nav .it.on{background:linear-gradient(100deg,#ffb57a,var(--orange) 45%,#e8661a);color:#07112b}
#cos-menu #shop .nav .it.on .n{color:#07112b;opacity:.65}
#cos-menu #shop .nav .it .dot{position:absolute;right:1.4vh;top:1.2vh;width:1.2vh;height:1.2vh;border-radius:50%;background:var(--red);box-shadow:0 0 1vh var(--red)}
#cos-menu #shop .page{display:none;grid-template-columns:repeat(4,1fr);grid-template-rows:1fr 1fr;gap:1.2vh;min-height:0}
#cos-menu #shop .page.on{display:grid}
#cos-menu #shop .page[data-page=coins]{grid-template-rows:1fr}
#cos-menu #shop .card{position:relative;display:flex;flex-direction:column;overflow:hidden;clip-path:polygon(1.2vh 0,100% 0,calc(100% - 1.2vh) 100%,0 100%);background:linear-gradient(180deg,color-mix(in srgb,var(--r) 30%,#0b1840) 0%,#0b1840 60%);cursor:pointer;min-height:0}
#cos-menu #shop .card::before{content:'';position:absolute;left:0;right:0;top:0;height:.7vh;background:var(--r);box-shadow:0 0 1.6vh var(--r)}
#cos-menu #shop .card .rar{position:absolute;left:1.6vh;top:1.6vh;font-family:'BC';font-weight:700;font-style:italic;font-size:1.7vh;letter-spacing:.2em;color:color-mix(in srgb,var(--r) 55%,#fff)}
#cos-menu #shop .card .bdg{position:absolute;right:1.4vh;top:1.4vh;font-family:'BC';font-weight:900;font-style:italic;font-size:1.8vh;letter-spacing:.1em;padding:.4vh .9vh;background:var(--yellow);color:#07112b;clip-path:polygon(.4vh 0,100% 0,calc(100% - .4vh) 100%,0 100%)}
#cos-menu #shop .card .bdg.sale{background:var(--red);color:#fff}
#cos-menu #shop .card .art{flex:1;display:grid;place-items:center;min-height:0;padding:3.4vh 1vh 1vh}
#cos-menu #shop .card .art svg{height:100%;max-height:16vh;width:auto;filter:drop-shadow(0 .8vh 1.2vh rgba(0,0,0,.5))}
#cos-menu #shop .card .ft{display:flex;align-items:center;gap:1vh;padding:1vh 1.6vh 1.2vh;background:rgba(4,10,28,.7);border-top:1px solid var(--line)}
#cos-menu #shop .card .ft .nm{flex:1;min-width:0}
#cos-menu #shop .card .ft .nm b{display:block;font-family:'BC';font-weight:700;font-style:italic;font-size:2.4vh;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cos-menu #shop .card .ft .nm span{display:block;font-family:'BC';font-weight:600;font-size:1.6vh;letter-spacing:.2em;color:var(--muted);margin-top:.3vh}
#cos-menu #shop .price{display:flex;align-items:center;gap:.8vh;font-family:'BC';font-weight:900;font-style:italic;font-size:2.6vh;color:var(--yellow);white-space:nowrap}
#cos-menu #shop .price i{width:2.2vh;height:2.2vh;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff2a8,#ffd23f 45%,#c98a00)}
#cos-menu #shop .price s{font-size:1.8vh;color:var(--muted);font-weight:700;margin-right:.2vh}
#cos-menu #shop .price.owned{color:var(--green);font-size:2vh;letter-spacing:.14em}
#cos-menu #shop .price.eur{color:var(--text)}
#cos-menu #shop .card.big{grid-row:1/3;grid-column:1/3;background:linear-gradient(160deg,rgba(255,138,61,.35),rgba(14,30,72,.95) 55%,#0b1840)}
#cos-menu #shop .card.big::before{background:var(--orange);box-shadow:0 0 1.6vh var(--orange)}
#cos-menu #shop .card.big .art{padding:4vh 2vh 1vh;position:relative}
#cos-menu #shop .card.big .art .set{display:flex;align-items:flex-end;justify-content:center;gap:2vh;width:100%;padding-bottom:2vh}
#cos-menu #shop .card.big .art .set svg{max-height:none;width:auto}
#cos-menu #shop .card.big .art .set img{height:26vh;width:auto;image-rendering:pixelated;filter:drop-shadow(0 .8vh 1.2vh rgba(0,0,0,.5))}
#cos-menu #shop .card.big .art .set svg{height:13vh}
#cos-menu #shop .card.big .art .set .fxw{width:22vh;height:14vh;margin-bottom:.5vh}
#cos-menu #shop .card.big .art .set .fxw .fx{height:100%;max-height:none}
#cos-menu #shop .card.big .art .set .fxw .g{font-size:5vh}
#cos-menu #shop .card.big .ghost{position:absolute;right:1.6vh;top:-1vh;font-family:'BC';font-weight:900;font-style:italic;font-size:18vh;line-height:.8;color:rgba(255,255,255,.05);pointer-events:none}
#cos-menu #shop .card.big .ft{padding:1.4vh 2.2vh 1.6vh}
#cos-menu #shop .card.big .ft .nm b{font-size:4vh}
#cos-menu #shop .card.big .ft .nm span{font-size:1.8vh}
#cos-menu #shop .card.big .buy{height:6.2vh;padding:0 2.4vh;display:flex;align-items:center;gap:1.2vh;background:linear-gradient(100deg,#ffe58a,var(--yellow) 45%,#f2b400);color:#07112b;font-family:'BC';font-weight:900;font-style:italic;font-size:2.8vh;clip-path:polygon(.8vh 0,100% 0,calc(100% - .8vh) 100%,0 100%)}
#cos-menu #shop .card.big .buy i{width:2.4vh;height:2.4vh;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#ffd23f 45%,#a86f00);border:1px solid rgba(0,0,0,.3)}
#cos-menu #shop .card.big .buy s{opacity:.55;font-size:2vh}
#cos-menu #shop .card.hair .art{padding:3.4vh 1vh 0;align-items:end}
#cos-menu #shop .card.hair .art img{height:100%;max-height:19vh;width:auto;image-rendering:pixelated;filter:drop-shadow(0 .8vh 1.2vh rgba(0,0,0,.5))}
#cos-menu #shop .card.goal .art{padding:3.2vh 1.2vh 1.2vh}
#cos-menu #shop .fx{position:relative;width:100%;height:100%;max-height:17vh;display:grid;place-items:center;overflow:hidden;background:
  repeating-linear-gradient(90deg,#4aa844 0 12%,#3f9a3a 12% 24%);border:1px solid rgba(0,0,0,.35)}
#cos-menu #shop .fx::before{content:'';position:absolute;inset:0;background:radial-gradient(60% 70% at 50% 50%,transparent 40%,rgba(0,0,0,.45))}
#cos-menu #shop .fx .g{position:relative;font-family:'BC';font-weight:900;font-style:italic;font-size:6.4vh;line-height:1;letter-spacing:.02em;color:#fff}
#cos-menu #shop .fx .sub{position:absolute;left:0;right:0;bottom:.8vh;text-align:center;font-family:'BC';font-weight:700;font-style:italic;font-size:1.7vh;letter-spacing:.14em;color:rgba(255,255,255,.85)}
#cos-menu #shop .fx .pv{position:absolute;right:.8vh;top:.8vh;font-family:'BC';font-weight:700;font-size:1.5vh;letter-spacing:.2em;color:#fff;background:rgba(0,0,0,.45);padding:.3vh .8vh}
#cos-menu #shop .fx.classic .g{text-shadow:0 .5vh 0 rgba(0,0,0,.35),0 0 2vh rgba(255,255,255,.7)}
#cos-menu #shop .fx.thunder .g{color:#ffe27a;text-shadow:0 0 1.2vh #ffd23f,0 0 3vh #2f6bff,0 .4vh 0 #07112b}
#cos-menu #shop .fx.thunder svg{position:absolute;inset:0;width:100%;height:100%}
#cos-menu #shop .fx.inferno .g{background:linear-gradient(180deg,#fff2a8,#ff8a3d 50%,#ff3b47);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 1.4vh rgba(255,80,40,.9)) drop-shadow(0 .4vh 0 #3a0a0a)}
#cos-menu #shop .fx.inferno::after{content:'';position:absolute;left:0;right:0;bottom:0;height:60%;background:linear-gradient(0deg,rgba(255,80,20,.65),transparent)}
#cos-menu #shop .fx.neon .g{color:#07112b;-webkit-text-stroke:.25vh #5ef2ff;text-shadow:0 0 1vh #5ef2ff,0 0 2.6vh #5ef2ff,0 0 5vh #2f6bff}
#cos-menu #shop .fx.neon{background:#0b1840}
#cos-menu #shop .fx.confetti .g{color:#fff;text-shadow:0 .4vh 0 #07112b}
#cos-menu #shop .fx.confetti i{position:absolute;width:1.2vh;height:.6vh;transform:rotate(var(--a))}
#cos-menu #shop .fx.gold .g{background:linear-gradient(180deg,#fff2a8,#ffd23f 50%,#c98a00);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 .4vh 0 #5a3a00) drop-shadow(0 0 1.6vh rgba(255,210,63,.8))}
#cos-menu #shop .fx.gold b{position:absolute;width:1vh;height:1vh;background:#fff;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
#cos-menu #shop .card.empty{background:rgba(255,255,255,.03);border:1px dashed rgba(255,255,255,.18);cursor:default}
#cos-menu #shop .card.empty::before{background:rgba(255,255,255,.12);box-shadow:none}
#cos-menu #shop .card.empty .art{display:grid;place-items:center}
#cos-menu #shop .card.empty .art .slot{width:7vh;height:7vh;display:grid;place-items:center;border:1px dashed rgba(255,255,255,.22);font-family:'BC';font-weight:900;font-size:4vh;color:rgba(255,255,255,.22);clip-path:polygon(.8vh 0,100% 0,calc(100% - .8vh) 100%,0 100%)}
#cos-menu #shop .card.empty .ft{background:rgba(4,10,28,.45)}
#cos-menu #shop .card.empty .ft .nm b{color:rgba(255,255,255,.35)}
#cos-menu #shop .card.empty.big{background:linear-gradient(160deg,rgba(255,138,61,.14),rgba(14,30,72,.6) 55%,rgba(11,24,64,.6))}
#cos-menu #shop .card.empty.big::before{background:rgba(255,138,61,.45)}
#cos-menu #shop .card.empty.big .art .slot{width:12vh;height:12vh;font-size:7vh}
#cos-menu #shop .card.coin .art{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:1vh;padding-bottom:2vh}
#cos-menu #shop .card.coin .art svg{max-height:none;height:22vh;width:auto}
#cos-menu #shop .card.coin .amt{text-align:center;line-height:.9}
#cos-menu #shop .card.coin .amt b{display:block;font-family:'BC';font-weight:900;font-style:italic;font-size:6vh;color:var(--yellow)}
#cos-menu #shop .card.coin .amt span{display:block;font-family:'BC';font-weight:600;font-size:1.9vh;letter-spacing:.3em;color:var(--muted);margin-top:.6vh}
#cos-menu #shop .card.coin .bonus{position:absolute;left:1.6vh;top:1.6vh;font-family:'BC';font-weight:900;font-style:italic;font-size:1.9vh;letter-spacing:.1em;padding:.4vh .9vh;background:var(--green);color:#07112b;clip-path:polygon(.4vh 0,100% 0,calc(100% - .4vh) 100%,0 100%)}

/* ===== TEAMNONE ===== */
#cos-menu .scr{position:fixed;inset:0}
#cos-menu #teamnone .bg{position:absolute;inset:-4%;background:
  radial-gradient(70% 55% at 50% 40%, rgba(47,107,255,.30), transparent 70%),
  radial-gradient(40% 35% at 0% 0%, rgba(255,255,240,.16), transparent 70%),
  radial-gradient(40% 35% at 100% 0%, rgba(255,255,240,.16), transparent 70%),
  linear-gradient(180deg,#0b1940 0%,#071029 55%,#040a1c 100%)}
#cos-menu #teamnone .bokeh{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(circle at 10% 18%, rgba(255,255,240,.16) 0 3vh, transparent 7vh),radial-gradient(circle at 90% 12%, rgba(255,255,240,.13) 0 3vh, transparent 8vh),
  radial-gradient(circle at 62% 8%, rgba(160,190,255,.12) 0 2vh, transparent 6vh),radial-gradient(circle at 22% 60%, rgba(160,190,255,.09) 0 4vh, transparent 9vh),
  radial-gradient(circle at 78% 70%, rgba(255,226,140,.07) 0 4vh, transparent 10vh),radial-gradient(circle at 45% 35%, rgba(160,190,255,.08) 0 3vh, transparent 8vh)}
#cos-menu #teamnone .pitch{position:absolute;left:-10%;right:-10%;bottom:-8%;height:48%;transform-origin:50% 100%;transform:perspective(70vh) rotateX(58deg);opacity:.45;
  background:radial-gradient(ellipse 13% 22% at 50% 12%, transparent 96%, rgba(140,180,255,.55) 97%, rgba(140,180,255,.55) 99%, transparent 100%),
  linear-gradient(90deg, transparent calc(50% - 1px), rgba(140,180,255,.55) calc(50% - 1px), rgba(140,180,255,.55) calc(50% + 1px), transparent calc(50% + 1px)),
  linear-gradient(180deg, rgba(140,180,255,.55) 0 2px, transparent 2px),
  repeating-linear-gradient(90deg, rgba(47,107,255,.10) 0 6%, rgba(47,107,255,.04) 6% 12%);
  -webkit-mask:linear-gradient(to top,#000 10%,transparent 95%);mask:linear-gradient(to top,#000 10%,transparent 95%)}
#cos-menu #teamnone .streaks{position:absolute;inset:0;overflow:hidden}
#cos-menu #teamnone .streaks i{position:absolute;top:-30%;height:160%;width:14vw;transform:rotate(24deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent)}
#cos-menu #teamnone .streaks i:nth-child(1){left:8%}
#cos-menu #teamnone .streaks i:nth-child(2){left:52%;width:8vw}
#cos-menu #teamnone .streaks i:nth-child(3){left:78%;width:20vw}
#cos-menu #teamnone .grain{position:absolute;inset:0;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
#cos-menu #teamnone .vig{position:absolute;inset:0;background:radial-gradient(120% 95% at 50% 45%, transparent 50%, rgba(2,5,15,.8) 100%)}
#cos-menu #teamnone .glass{background:linear-gradient(180deg,var(--navy-2),var(--navy));border:1px solid var(--line);box-shadow:0 1.4vh 3vh rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12)}
#cos-menu #teamnone .foot{position:absolute;left:var(--L);right:var(--R);bottom:max(4vh,env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between}
#cos-menu #teamnone .online{display:flex;align-items:center;gap:1.2vh;font-family:'BC';font-weight:700;font-style:italic;font-size:3.2vh;height:8vh;padding:0 2.4vh;border-radius:99px}
#cos-menu #teamnone .online i{width:1.6vh;height:1.6vh;border-radius:50%;background:var(--green);box-shadow:0 0 1.4vh var(--green)}
#cos-menu #teamnone .online small{font-family:'BC';font-weight:600;font-style:normal;font-size:2.2vh;letter-spacing:.2em;color:var(--muted)}
#cos-menu #teamnone .ver{font-family:'BC';font-weight:600;font-size:2.2vh;letter-spacing:.24em;color:#5d6f99}
#cos-menu #teamnone .chat{display:flex;align-items:center;gap:1.4vh;height:8vh;padding:0 2.6vh;border-radius:99px;font-family:'BC';font-weight:700;font-style:italic;font-size:3.2vh;letter-spacing:.08em}
#cos-menu #teamnone .chat b{min-width:3.4vh;height:3.4vh;border-radius:99px;background:var(--red);font-family:'BC';font-weight:900;font-size:2.2vh;display:grid;place-items:center;padding:0 .8vh;font-style:normal}
#cos-menu #teamnone .topl{position:absolute;left:var(--L);top:var(--T)}
#cos-menu #teamnone .topr{position:absolute;right:var(--R);top:var(--T);display:flex;gap:1.4vh;align-items:center}
#cos-menu #teamnone .back{height:9vh;display:flex;align-items:center;gap:1.2vh;padding:0 2.6vh 0 2vh;border-radius:1.6vh;font-family:'BC';font-weight:700;font-style:italic;font-size:3.2vh;letter-spacing:.1em}
#cos-menu #teamnone .back::before{content:'';width:1.6vh;height:1.6vh;border-left:.4vh solid var(--text);border-bottom:.4vh solid var(--text);transform:rotate(45deg);margin-right:.4vh}
#cos-menu #teamnone .chip{height:9vh;display:flex;align-items:center;gap:1.6vh;padding:0 2.4vh;border-radius:1.6vh}
#cos-menu #teamnone .chip .k{font-family:'BC';font-weight:600;font-size:2.1vh;letter-spacing:.3em;color:var(--muted)}
#cos-menu #teamnone .chip .v{font-family:'BC';font-weight:700;font-style:italic;font-size:3vh}
#cos-menu #teamnone .chip .sep{width:1px;height:4vh;background:var(--line)}
#cos-menu #teamnone .pan{position:relative;display:flex;flex-direction:column;overflow:hidden;
  clip-path:polygon(2.4vh 0,100% 0,calc(100% - 2.4vh) 100%,0 100%);background:linear-gradient(180deg,rgba(14,30,72,.9),rgba(8,18,46,.75))}
#cos-menu #teamnone .pan::after{content:'';position:absolute;left:0;right:0;bottom:0;height:.9vh;background:var(--c);box-shadow:0 0 2vh var(--c)}
#cos-menu #teamnone .ph{display:flex;align-items:flex-end;justify-content:space-between}
#cos-menu #teamnone .ph .h{font-family:'BC';font-weight:900;font-style:italic;font-size:4.6vh;line-height:.9}
#cos-menu #teamnone .ph .s{font-size:2.2vh;color:#b9c7e8;margin-top:.6vh}
#cos-menu #teamnone .ph .more{display:flex;align-items:center;gap:1.2vh;font-family:'BC';font-weight:700;font-style:italic;font-size:2.8vh}
#cos-menu #teamnone .ph .more small{font-family:'BC';font-weight:600;font-style:normal;font-size:2vh;letter-spacing:.22em;color:var(--muted)}
#cos-menu #teamnone .head{position:absolute;left:calc(var(--L) + 22vh);top:var(--T);height:9vh;display:flex;align-items:center;gap:2vh}
#cos-menu #teamnone .head .bar{width:2vh;height:8vh;background:var(--green);transform:skewX(-14deg);box-shadow:0 0 2vh rgba(63,209,106,.6);border-radius:2px}
#cos-menu #teamnone .head .t{font-family:'BC';font-weight:900;font-style:italic;font-size:6vh;line-height:.9}
#cos-menu #teamnone .head .d{font-family:'BC';font-weight:600;font-size:2.1vh;letter-spacing:.26em;color:var(--muted);margin-top:.5vh}
#cos-menu #teamnone .state{display:none}
#cos-menu #teamnone .state.on{display:block}
#cos-menu #teamnone .grid{position:absolute;left:var(--L);right:var(--R);top:17.5vh;bottom:15.5vh;display:grid;gap:1.4vh}
#cos-menu #teamnone #s-none .grid{grid-template-columns:1.25fr 1fr}
#cos-menu #teamnone .big{justify-content:flex-end;padding:3vh 3.4vh}
#cos-menu #teamnone .big .ghost{position:absolute;right:2vh;top:-1vh;font-family:'BC';font-weight:900;font-style:italic;font-size:20vh;line-height:.8;color:rgba(255,255,255,.05)}
#cos-menu #teamnone .big.yel{background:linear-gradient(110deg,#ffe58a,var(--yellow) 45%,#f2b400);color:#07112b}
#cos-menu #teamnone .big.yel::after{display:none}
#cos-menu #teamnone .big.yel .ghost{color:rgba(7,17,43,.07)}
#cos-menu #teamnone .big .ic{position:absolute;left:3.4vh;top:3vh;width:9vh;height:9vh}
#cos-menu #teamnone .big .ic svg{width:100%;height:100%}
#cos-menu #teamnone .big .t{font-family:'BC';font-weight:900;font-style:italic;font-size:8vh;line-height:.85}
#cos-menu #teamnone .big .x{font-size:2.4vh;line-height:1.4;margin-top:1.4vh;max-width:30vw;color:#b9c7e8}
#cos-menu #teamnone .big.yel .x{color:#07112b;opacity:.75}
#cos-menu #teamnone .big .pts{display:flex;gap:2.4vh;margin-top:2vh;flex-wrap:wrap}
#cos-menu #teamnone .big .pts span{display:flex;align-items:center;gap:.8vh;font-family:'BC';font-weight:700;font-size:2vh;letter-spacing:.14em}
#cos-menu #teamnone .big .pts i{width:.5vh;height:2vh;background:currentColor;transform:skewX(-14deg)}
#cos-menu #teamnone .big .go{margin-top:2.6vh;align-self:flex-start;height:6.6vh;padding:0 3vh;display:flex;align-items:center;gap:1.4vh;font-family:'BC';font-weight:900;font-style:italic;font-size:2.9vh;letter-spacing:.1em;clip-path:polygon(1vh 0,100% 0,calc(100% - 1vh) 100%,0 100%)}
#cos-menu #teamnone .big.yel .go{background:#07112b;color:var(--yellow)}
#cos-menu #teamnone .big .go.lt{background:rgba(255,255,255,.1);border:1px solid var(--line);color:var(--text)}
#cos-menu #teamnone .big .go::after{content:'';width:1.2vh;height:1.2vh;border-right:.35vh solid currentColor;border-top:.35vh solid currentColor;transform:rotate(45deg)}
#cos-menu #teamnone .side{display:grid;grid-template-rows:1.3fr 1fr;gap:1.4vh;min-height:0}
#cos-menu #teamnone .side .pan{padding:2.4vh 3vh}
#cos-menu #teamnone .inv{display:flex;align-items:center;gap:1.6vh;padding:1.2vh 0;border-top:1px solid rgba(255,255,255,.08)}
#cos-menu #teamnone .inv:first-of-type{border-top:0}
#cos-menu #teamnone .crest{width:5.4vh;height:5.4vh;flex:none;display:grid;place-items:center;clip-path:polygon(.7vh 0,100% 0,calc(100% - .7vh) 100%,0 100%);background:linear-gradient(135deg,color-mix(in srgb,var(--c) 70%,#fff),color-mix(in srgb,var(--c) 70%,#000));font-family:'BC';font-weight:900;font-style:italic;font-size:2.1vh;color:#fff;text-shadow:0 .3vh 0 rgba(0,0,0,.3)}
#cos-menu #teamnone .inv .tx{flex:1;min-width:0}
#cos-menu #teamnone .inv .tx b{display:block;font-family:'BC';font-weight:700;font-style:italic;font-size:2.7vh}
#cos-menu #teamnone .inv .tx span{display:block;font-family:'BC';font-weight:600;font-size:1.7vh;letter-spacing:.18em;color:var(--muted);margin-top:.3vh}
#cos-menu #teamnone .b{height:5vh;min-width:11vh;padding:0 1.6vh;display:flex;align-items:center;justify-content:center;font-family:'BC';font-weight:900;font-style:italic;font-size:2.1vh;letter-spacing:.08em;clip-path:polygon(.8vh 0,100% 0,calc(100% - .8vh) 100%,0 100%);white-space:nowrap}
#cos-menu #teamnone .b.acc{background:var(--green);color:#07112b}
#cos-menu #teamnone .b.dec{background:rgba(255,59,71,.15);border:1px solid rgba(255,59,71,.5);color:var(--red)}
#cos-menu #teamnone .b.join{background:linear-gradient(100deg,#ffe58a,var(--yellow) 45%,#f2b400);color:#07112b}
#cos-menu #teamnone .b.req{background:rgba(255,255,255,.08);border:1px solid var(--line);color:var(--text)}
#cos-menu #teamnone .b.full{background:rgba(255,255,255,.04);border:1px dashed rgba(255,255,255,.25);color:var(--muted)}
#cos-menu #teamnone .code{display:flex;gap:1vh;margin-top:1.6vh}
#cos-menu #teamnone .code .in{flex:1;height:6.4vh;display:flex;align-items:center;padding:0 2vh;background:rgba(4,10,28,.6);border:1px solid var(--line);font-family:'BC';font-weight:700;font-size:3vh;letter-spacing:.4em;color:#5d6f99;clip-path:polygon(1vh 0,100% 0,calc(100% - 1vh) 100%,0 100%)}
#cos-menu #teamnone .code .b{height:6.4vh}
#cos-menu #teamnone .side .s2{font-size:2.1vh;color:#b9c7e8;margin-top:.8vh}
#cos-menu #teamnone #s-create .grid{grid-template-columns:1fr 1.15fr}
#cos-menu #teamnone .prev{padding:2.6vh 3vh;justify-content:center;align-items:center;text-align:center;background:radial-gradient(70% 60% at 50% 40%, color-mix(in srgb,var(--tc) 35%,transparent), transparent 75%),linear-gradient(180deg,rgba(14,30,72,.9),rgba(8,18,46,.75))}
#cos-menu #teamnone .prev .lab{position:absolute;left:3vh;top:2.4vh;font-family:'BC';font-weight:600;font-size:1.8vh;letter-spacing:.3em;color:var(--muted)}
#cos-menu #teamnone .bigcrest{width:20vh;height:22vh;display:grid;place-items:center;filter:drop-shadow(0 1.4vh 2vh rgba(0,0,0,.5))}
#cos-menu #teamnone .bigcrest svg{width:100%;height:100%}
#cos-menu #teamnone .prev .nm{font-family:'BC';font-weight:900;font-style:italic;font-size:6vh;line-height:.9;margin-top:2vh}
#cos-menu #teamnone .prev .sh{display:inline-flex;align-items:center;gap:1vh;margin-top:1vh;font-family:'BC';font-weight:700;font-size:2.2vh;letter-spacing:.3em;color:var(--muted)}
#cos-menu #teamnone .prev .sh b{font-weight:900;font-style:italic;font-size:2.8vh;letter-spacing:.1em;color:var(--yellow)}
#cos-menu #teamnone .prev .kits{display:flex;gap:1.6vh;margin-top:2.4vh}
#cos-menu #teamnone .prev .kits svg{width:9vh;height:auto;filter:drop-shadow(0 .6vh 1vh rgba(0,0,0,.4))}
#cos-menu #teamnone .form{padding:2.4vh 3vh 2.6vh;gap:1.4vh}
#cos-menu #teamnone .fld{display:flex;flex-direction:column;gap:.7vh}
#cos-menu #teamnone .fld label{font-family:'BC';font-weight:600;font-size:1.8vh;letter-spacing:.26em;color:var(--muted);display:flex;justify-content:space-between}
#cos-menu #teamnone .fld label em{font-style:normal;color:#5d6f99;letter-spacing:.14em}
#cos-menu #teamnone .fld .in{height:6.4vh;display:flex;align-items:center;padding:0 2vh;background:rgba(4,10,28,.65);border:1px solid var(--line);font-family:'BC';font-weight:700;font-style:italic;font-size:3vh;color:var(--text);clip-path:polygon(1vh 0,100% 0,calc(100% - 1vh) 100%,0 100%)}
#cos-menu #teamnone .fld .in.focus{border-color:var(--yellow);box-shadow:inset 0 0 0 1px var(--yellow)}
#cos-menu #teamnone .fld .in.focus::after{content:'';width:.3vh;height:3.4vh;background:var(--yellow);margin-left:.4vh}
#cos-menu #teamnone .two{display:grid;grid-template-columns:1fr 1.6fr;gap:1.6vh}
#cos-menu #teamnone .sw{display:flex;gap:.9vh}
#cos-menu #teamnone .sw i{flex:1;height:5.2vh;border:2px solid transparent;clip-path:polygon(.7vh 0,100% 0,calc(100% - .7vh) 100%,0 100%);background:var(--c);position:relative}
#cos-menu #teamnone .sw i.on{box-shadow:inset 0 0 0 .4vh #07112b;outline:none}
#cos-menu #teamnone .sw i.on::after{content:'';position:absolute;inset:.5vh;border:.3vh solid #fff;clip-path:polygon(.5vh 0,100% 0,calc(100% - .5vh) 100%,0 100%)}
#cos-menu #teamnone .shapes{display:flex;gap:.9vh}
#cos-menu #teamnone .shapes div{flex:1;height:6vh;display:grid;place-items:center;background:rgba(255,255,255,.05);border:1px solid var(--line);clip-path:polygon(.8vh 0,100% 0,calc(100% - .8vh) 100%,0 100%)}
#cos-menu #teamnone .shapes div.on{background:rgba(255,210,63,.12);border-color:var(--yellow)}
#cos-menu #teamnone .shapes svg{height:4vh;width:auto}
#cos-menu #teamnone .seg{display:flex;gap:.8vh}
#cos-menu #teamnone .seg div{flex:1;height:5.4vh;display:flex;align-items:center;justify-content:center;gap:1vh;font-family:'BC';font-weight:700;font-style:italic;font-size:2.2vh;letter-spacing:.08em;color:#b9c7e8;background:rgba(255,255,255,.05);border:1px solid var(--line);clip-path:polygon(.8vh 0,100% 0,calc(100% - .8vh) 100%,0 100%)}
#cos-menu #teamnone .seg div.on{background:linear-gradient(100deg,#ffe58a,var(--yellow) 45%,#f2b400);color:#07112b;border-color:transparent}
#cos-menu #teamnone .foot2{display:flex;align-items:center;gap:1.4vh;margin-top:auto}
#cos-menu #teamnone .cost{display:flex;align-items:center;gap:1vh;font-family:'BC';font-weight:600;font-size:1.9vh;letter-spacing:.2em;color:var(--muted)}
#cos-menu #teamnone .cost b{display:flex;align-items:center;gap:.8vh;font-family:'BC';font-weight:900;font-style:italic;font-size:2.8vh;color:var(--yellow);letter-spacing:.02em}
#cos-menu #teamnone .cost b i{width:2.4vh;height:2.4vh;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff2a8,#ffd23f 45%,#c98a00)}
#cos-menu #teamnone .create{margin-left:auto;height:7vh;padding:0 3.4vh;display:flex;align-items:center;gap:1.4vh;background:linear-gradient(100deg,#ffe58a,var(--yellow) 45%,#f2b400);color:#07112b;font-family:'BC';font-weight:900;font-style:italic;font-size:3.2vh;letter-spacing:.1em;clip-path:polygon(1.2vh 0,100% 0,calc(100% - 1.2vh) 100%,0 100%)}
#cos-menu #teamnone .create::after{content:'';width:1.3vh;height:1.3vh;border-right:.4vh solid #07112b;border-top:.4vh solid #07112b;transform:rotate(45deg)}
#cos-menu #teamnone #s-join .grid{grid-template-columns:1fr}
#cos-menu #teamnone .list{padding:2.2vh 3vh 2vh}
#cos-menu #teamnone .tools{display:flex;gap:1.2vh;margin-top:1.4vh}
#cos-menu #teamnone .search{flex:1;height:6vh;display:flex;align-items:center;gap:1.4vh;padding:0 1.8vh;background:rgba(4,10,28,.6);border:1px solid var(--line);font-size:2.3vh;color:var(--muted);clip-path:polygon(1vh 0,100% 0,calc(100% - 1vh) 100%,0 100%)}
#cos-menu #teamnone .search svg{width:2.6vh;height:2.6vh;stroke:var(--muted);fill:none;stroke-width:2.4;stroke-linecap:round}
#cos-menu #teamnone .filt{height:6vh;display:flex;align-items:center;gap:1vh;padding:0 1.4vh;border:1px solid var(--line);background:rgba(255,255,255,.04);font-family:'BC';font-weight:600;font-size:1.8vh;letter-spacing:.2em;color:var(--muted)}
#cos-menu #teamnone .filt span{padding:.5vh 1.1vh;background:rgba(255,255,255,.06);color:#b9c7e8;clip-path:polygon(.5vh 0,100% 0,calc(100% - .5vh) 100%,0 100%)}
#cos-menu #teamnone .filt span.on{background:var(--yellow);color:#07112b}
#cos-menu #teamnone .rows{flex:1;overflow:hidden;margin-top:1vh}
#cos-menu #teamnone .tr{display:grid;grid-template-columns:6vh 1fr 12vh 10vh 12vh 14vh;align-items:center;gap:1.4vh;padding:1.1vh 0;border-top:1px solid rgba(255,255,255,.08)}
#cos-menu #teamnone .tr.hd{font-family:'BC';font-weight:600;font-size:1.7vh;letter-spacing:.24em;color:var(--muted);border-top:0;padding:.4vh 0}
#cos-menu #teamnone .tr .nm b{display:block;font-family:'BC';font-weight:700;font-style:italic;font-size:2.8vh}
#cos-menu #teamnone .tr .nm span{display:block;font-family:'BC';font-weight:600;font-size:1.7vh;letter-spacing:.16em;color:var(--muted);margin-top:.3vh}
#cos-menu #teamnone .tr .c{text-align:center;font-family:'BC';font-weight:900;font-style:italic;font-size:2.7vh}
#cos-menu #teamnone .tr .c.y{color:var(--yellow)}
#cos-menu #teamnone .tr .c small{display:block;font-weight:600;font-style:normal;font-size:1.5vh;letter-spacing:.2em;color:var(--muted)}
#cos-menu #teamnone .tag2{display:inline-flex;align-items:center;gap:.7vh;font-family:'BC';font-weight:700;font-size:1.7vh;letter-spacing:.18em;padding:.4vh 1vh;clip-path:polygon(.5vh 0,100% 0,calc(100% - .5vh) 100%,0 100%)}
#cos-menu #teamnone .tag2.open{background:rgba(63,209,106,.15);color:var(--green)}
#cos-menu #teamnone .tag2.inv{background:rgba(255,210,63,.12);color:var(--yellow)}

/* ===== TEAMMANAGE ===== */
#cos-menu .scr{position:fixed;inset:0}
#cos-menu #teammanage .bg{position:absolute;inset:-4%;background:
  radial-gradient(70% 55% at 50% 40%, rgba(47,107,255,.30), transparent 70%),
  radial-gradient(40% 35% at 0% 0%, rgba(255,255,240,.16), transparent 70%),
  radial-gradient(40% 35% at 100% 0%, rgba(255,255,240,.16), transparent 70%),
  linear-gradient(180deg,#0b1940 0%,#071029 55%,#040a1c 100%)}
#cos-menu #teammanage .bokeh{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(circle at 10% 18%, rgba(255,255,240,.16) 0 3vh, transparent 7vh),radial-gradient(circle at 90% 12%, rgba(255,255,240,.13) 0 3vh, transparent 8vh),
  radial-gradient(circle at 62% 8%, rgba(160,190,255,.12) 0 2vh, transparent 6vh),radial-gradient(circle at 22% 60%, rgba(160,190,255,.09) 0 4vh, transparent 9vh),
  radial-gradient(circle at 78% 70%, rgba(255,226,140,.07) 0 4vh, transparent 10vh),radial-gradient(circle at 45% 35%, rgba(160,190,255,.08) 0 3vh, transparent 8vh)}
#cos-menu #teammanage .pitch{position:absolute;left:-10%;right:-10%;bottom:-8%;height:48%;transform-origin:50% 100%;transform:perspective(70vh) rotateX(58deg);opacity:.45;
  background:radial-gradient(ellipse 13% 22% at 50% 12%, transparent 96%, rgba(140,180,255,.55) 97%, rgba(140,180,255,.55) 99%, transparent 100%),
  linear-gradient(90deg, transparent calc(50% - 1px), rgba(140,180,255,.55) calc(50% - 1px), rgba(140,180,255,.55) calc(50% + 1px), transparent calc(50% + 1px)),
  linear-gradient(180deg, rgba(140,180,255,.55) 0 2px, transparent 2px),
  repeating-linear-gradient(90deg, rgba(47,107,255,.10) 0 6%, rgba(47,107,255,.04) 6% 12%);
  -webkit-mask:linear-gradient(to top,#000 10%,transparent 95%);mask:linear-gradient(to top,#000 10%,transparent 95%)}
#cos-menu #teammanage .streaks{position:absolute;inset:0;overflow:hidden}
#cos-menu #teammanage .streaks i{position:absolute;top:-30%;height:160%;width:14vw;transform:rotate(24deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent)}
#cos-menu #teammanage .streaks i:nth-child(1){left:8%}
#cos-menu #teammanage .streaks i:nth-child(2){left:52%;width:8vw}
#cos-menu #teammanage .streaks i:nth-child(3){left:78%;width:20vw}
#cos-menu #teammanage .grain{position:absolute;inset:0;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
#cos-menu #teammanage .vig{position:absolute;inset:0;background:radial-gradient(120% 95% at 50% 45%, transparent 50%, rgba(2,5,15,.8) 100%)}
#cos-menu #teammanage .glass{background:linear-gradient(180deg,var(--navy-2),var(--navy));border:1px solid var(--line);box-shadow:0 1.4vh 3vh rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12)}
#cos-menu #teammanage .foot{position:absolute;left:var(--L);right:var(--R);bottom:max(4vh,env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between}
#cos-menu #teammanage .online{display:flex;align-items:center;gap:1.2vh;font-family:'BC';font-weight:700;font-style:italic;font-size:3.2vh;height:8vh;padding:0 2.4vh;border-radius:99px}
#cos-menu #teammanage .online i{width:1.6vh;height:1.6vh;border-radius:50%;background:var(--green);box-shadow:0 0 1.4vh var(--green)}
#cos-menu #teammanage .online small{font-family:'BC';font-weight:600;font-style:normal;font-size:2.2vh;letter-spacing:.2em;color:var(--muted)}
#cos-menu #teammanage .ver{font-family:'BC';font-weight:600;font-size:2.2vh;letter-spacing:.24em;color:#5d6f99}
#cos-menu #teammanage .chat{display:flex;align-items:center;gap:1.4vh;height:8vh;padding:0 2.6vh;border-radius:99px;font-family:'BC';font-weight:700;font-style:italic;font-size:3.2vh;letter-spacing:.08em}
#cos-menu #teammanage .chat b{min-width:3.4vh;height:3.4vh;border-radius:99px;background:var(--red);font-family:'BC';font-weight:900;font-size:2.2vh;display:grid;place-items:center;padding:0 .8vh;font-style:normal}
#cos-menu #teammanage .topl{position:absolute;left:var(--L);top:var(--T)}
#cos-menu #teammanage .topr{position:absolute;right:var(--R);top:var(--T);display:flex;gap:1.4vh;align-items:center}
#cos-menu #teammanage .back{height:9vh;display:flex;align-items:center;gap:1.2vh;padding:0 2.6vh 0 2vh;border-radius:1.6vh;font-family:'BC';font-weight:700;font-style:italic;font-size:3.2vh;letter-spacing:.1em}
#cos-menu #teammanage .back::before{content:'';width:1.6vh;height:1.6vh;border-left:.4vh solid var(--text);border-bottom:.4vh solid var(--text);transform:rotate(45deg);margin-right:.4vh}
#cos-menu #teammanage .chip{height:9vh;display:flex;align-items:center;gap:1.6vh;padding:0 2.4vh;border-radius:1.6vh}
#cos-menu #teammanage .chip .k{font-family:'BC';font-weight:600;font-size:2.1vh;letter-spacing:.3em;color:var(--muted)}
#cos-menu #teammanage .chip .v{font-family:'BC';font-weight:700;font-style:italic;font-size:3vh}
#cos-menu #teammanage .chip .sep{width:1px;height:4vh;background:var(--line)}
#cos-menu #teammanage .pan{position:relative;display:flex;flex-direction:column;overflow:hidden;
  clip-path:polygon(2.4vh 0,100% 0,calc(100% - 2.4vh) 100%,0 100%);background:linear-gradient(180deg,rgba(14,30,72,.9),rgba(8,18,46,.75))}
#cos-menu #teammanage .pan::after{content:'';position:absolute;left:0;right:0;bottom:0;height:.9vh;background:var(--c);box-shadow:0 0 2vh var(--c)}
#cos-menu #teammanage .ph{display:flex;align-items:flex-end;justify-content:space-between}
#cos-menu #teammanage .ph .h{font-family:'BC';font-weight:900;font-style:italic;font-size:4.6vh;line-height:.9}
#cos-menu #teammanage .ph .s{font-size:2.2vh;color:#b9c7e8;margin-top:.6vh}
#cos-menu #teammanage .ph .more{display:flex;align-items:center;gap:1.2vh;font-family:'BC';font-weight:700;font-style:italic;font-size:2.8vh}
#cos-menu #teammanage .ph .more small{font-family:'BC';font-weight:600;font-style:normal;font-size:2vh;letter-spacing:.22em;color:var(--muted)}
#cos-menu #teammanage .head{position:absolute;left:calc(var(--L) + 22vh);top:var(--T);height:9vh;display:flex;align-items:center;gap:2vh}
#cos-menu #teammanage .head .bar{width:2vh;height:8vh;background:var(--green);transform:skewX(-14deg);box-shadow:0 0 2vh rgba(63,209,106,.6);border-radius:2px}
#cos-menu #teammanage .head .t{font-family:'BC';font-weight:900;font-style:italic;font-size:6vh;line-height:.9}
#cos-menu #teammanage .head .d{font-family:'BC';font-weight:600;font-size:2.1vh;letter-spacing:.26em;color:var(--muted);margin-top:.5vh}
#cos-menu #teammanage .state{display:none}
#cos-menu #teammanage .state.on{display:block}
#cos-menu #teammanage .grid{position:absolute;left:var(--L);right:var(--R);top:17.5vh;bottom:15.5vh;display:grid;gap:1.4vh}
#cos-menu #teammanage #s-none .grid{grid-template-columns:1.25fr 1fr}
#cos-menu #teammanage .big{justify-content:flex-end;padding:3vh 3.4vh}
#cos-menu #teammanage .big .ghost{position:absolute;right:2vh;top:-1vh;font-family:'BC';font-weight:900;font-style:italic;font-size:20vh;line-height:.8;color:rgba(255,255,255,.05)}
#cos-menu #teammanage .big.yel{background:linear-gradient(110deg,#ffe58a,var(--yellow) 45%,#f2b400);color:#07112b}
#cos-menu #teammanage .big.yel::after{display:none}
#cos-menu #teammanage .big.yel .ghost{color:rgba(7,17,43,.07)}
#cos-menu #teammanage .big .ic{position:absolute;left:3.4vh;top:3vh;width:9vh;height:9vh}
#cos-menu #teammanage .big .ic svg{width:100%;height:100%}
#cos-menu #teammanage .big .t{font-family:'BC';font-weight:900;font-style:italic;font-size:8vh;line-height:.85}
#cos-menu #teammanage .big .x{font-size:2.4vh;line-height:1.4;margin-top:1.4vh;max-width:30vw;color:#b9c7e8}
#cos-menu #teammanage .big.yel .x{color:#07112b;opacity:.75}
#cos-menu #teammanage .big .pts{display:flex;gap:2.4vh;margin-top:2vh;flex-wrap:wrap}
#cos-menu #teammanage .big .pts span{display:flex;align-items:center;gap:.8vh;font-family:'BC';font-weight:700;font-size:2vh;letter-spacing:.14em}
#cos-menu #teammanage .big .pts i{width:.5vh;height:2vh;background:currentColor;transform:skewX(-14deg)}
#cos-menu #teammanage .big .go{margin-top:2.6vh;align-self:flex-start;height:6.6vh;padding:0 3vh;display:flex;align-items:center;gap:1.4vh;font-family:'BC';font-weight:900;font-style:italic;font-size:2.9vh;letter-spacing:.1em;clip-path:polygon(1vh 0,100% 0,calc(100% - 1vh) 100%,0 100%)}
#cos-menu #teammanage .big.yel .go{background:#07112b;color:var(--yellow)}
#cos-menu #teammanage .big .go.lt{background:rgba(255,255,255,.1);border:1px solid var(--line);color:var(--text)}
#cos-menu #teammanage .big .go::after{content:'';width:1.2vh;height:1.2vh;border-right:.35vh solid currentColor;border-top:.35vh solid currentColor;transform:rotate(45deg)}
#cos-menu #teammanage .side{display:grid;grid-template-rows:1.3fr 1fr;gap:1.4vh;min-height:0}
#cos-menu #teammanage .side .pan{padding:2.4vh 3vh}
#cos-menu #teammanage .inv{display:flex;align-items:center;gap:1.6vh;padding:1.2vh 0;border-top:1px solid rgba(255,255,255,.08)}
#cos-menu #teammanage .inv:first-of-type{border-top:0}
#cos-menu #teammanage .crest{width:5.4vh;height:5.4vh;flex:none;display:grid;place-items:center;clip-path:polygon(.7vh 0,100% 0,calc(100% - .7vh) 100%,0 100%);background:linear-gradient(135deg,color-mix(in srgb,var(--c) 70%,#fff),color-mix(in srgb,var(--c) 70%,#000));font-family:'BC';font-weight:900;font-style:italic;font-size:2.1vh;color:#fff;text-shadow:0 .3vh 0 rgba(0,0,0,.3)}
#cos-menu #teammanage .inv .tx{flex:1;min-width:0}
#cos-menu #teammanage .inv .tx b{display:block;font-family:'BC';font-weight:700;font-style:italic;font-size:2.7vh}
#cos-menu #teammanage .inv .tx span{display:block;font-family:'BC';font-weight:600;font-size:1.7vh;letter-spacing:.18em;color:var(--muted);margin-top:.3vh}
#cos-menu #teammanage .b{height:5vh;min-width:11vh;padding:0 1.6vh;display:flex;align-items:center;justify-content:center;font-family:'BC';font-weight:900;font-style:italic;font-size:2.1vh;letter-spacing:.08em;clip-path:polygon(.8vh 0,100% 0,calc(100% - .8vh) 100%,0 100%);white-space:nowrap}
#cos-menu #teammanage .b.acc{background:var(--green);color:#07112b}
#cos-menu #teammanage .b.dec{background:rgba(255,59,71,.15);border:1px solid rgba(255,59,71,.5);color:var(--red)}
#cos-menu #teammanage .b.join{background:linear-gradient(100deg,#ffe58a,var(--yellow) 45%,#f2b400);color:#07112b}
#cos-menu #teammanage .b.req{background:rgba(255,255,255,.08);border:1px solid var(--line);color:var(--text)}
#cos-menu #teammanage .b.full{background:rgba(255,255,255,.04);border:1px dashed rgba(255,255,255,.25);color:var(--muted)}
#cos-menu #teammanage .code{display:flex;gap:1vh;margin-top:1.6vh}
#cos-menu #teammanage .code .in{flex:1;height:6.4vh;display:flex;align-items:center;padding:0 2vh;background:rgba(4,10,28,.6);border:1px solid var(--line);font-family:'BC';font-weight:700;font-size:3vh;letter-spacing:.4em;color:#5d6f99;clip-path:polygon(1vh 0,100% 0,calc(100% - 1vh) 100%,0 100%)}
#cos-menu #teammanage .code .b{height:6.4vh}
#cos-menu #teammanage .side .s2{font-size:2.1vh;color:#b9c7e8;margin-top:.8vh}
#cos-menu #teammanage #s-create .grid{grid-template-columns:1fr 1.15fr}
#cos-menu #teammanage .prev{padding:2.6vh 3vh;justify-content:center;align-items:center;text-align:center;background:radial-gradient(70% 60% at 50% 40%, color-mix(in srgb,var(--tc) 35%,transparent), transparent 75%),linear-gradient(180deg,rgba(14,30,72,.9),rgba(8,18,46,.75))}
#cos-menu #teammanage .prev .lab{position:absolute;left:3vh;top:2.4vh;font-family:'BC';font-weight:600;font-size:1.8vh;letter-spacing:.3em;color:var(--muted)}
#cos-menu #teammanage .bigcrest{width:20vh;height:22vh;display:grid;place-items:center;filter:drop-shadow(0 1.4vh 2vh rgba(0,0,0,.5))}
#cos-menu #teammanage .bigcrest svg{width:100%;height:100%}
#cos-menu #teammanage .prev .nm{font-family:'BC';font-weight:900;font-style:italic;font-size:6vh;line-height:.9;margin-top:2vh}
#cos-menu #teammanage .prev .sh{display:inline-flex;align-items:center;gap:1vh;margin-top:1vh;font-family:'BC';font-weight:700;font-size:2.2vh;letter-spacing:.3em;color:var(--muted)}
#cos-menu #teammanage .prev .sh b{font-weight:900;font-style:italic;font-size:2.8vh;letter-spacing:.1em;color:var(--yellow)}
#cos-menu #teammanage .prev .kits{display:flex;gap:1.6vh;margin-top:2.4vh}
#cos-menu #teammanage .prev .kits svg{width:9vh;height:auto;filter:drop-shadow(0 .6vh 1vh rgba(0,0,0,.4))}
#cos-menu #teammanage .form{padding:2.4vh 3vh 2.6vh;gap:1.4vh}
#cos-menu #teammanage .fld{display:flex;flex-direction:column;gap:.7vh}
#cos-menu #teammanage .fld label{font-family:'BC';font-weight:600;font-size:1.8vh;letter-spacing:.26em;color:var(--muted);display:flex;justify-content:space-between}
#cos-menu #teammanage .fld label em{font-style:normal;color:#5d6f99;letter-spacing:.14em}
#cos-menu #teammanage .fld .in{height:6.4vh;display:flex;align-items:center;padding:0 2vh;background:rgba(4,10,28,.65);border:1px solid var(--line);font-family:'BC';font-weight:700;font-style:italic;font-size:3vh;color:var(--text);clip-path:polygon(1vh 0,100% 0,calc(100% - 1vh) 100%,0 100%)}
#cos-menu #teammanage .fld .in.focus{border-color:var(--yellow);box-shadow:inset 0 0 0 1px var(--yellow)}
#cos-menu #teammanage .fld .in.focus::after{content:'';width:.3vh;height:3.4vh;background:var(--yellow);margin-left:.4vh}
#cos-menu #teammanage .two{display:grid;grid-template-columns:1fr 1.6fr;gap:1.6vh}
#cos-menu #teammanage .sw{display:flex;gap:.9vh}
#cos-menu #teammanage .sw i{flex:1;height:5.2vh;border:2px solid transparent;clip-path:polygon(.7vh 0,100% 0,calc(100% - .7vh) 100%,0 100%);background:var(--c);position:relative}
#cos-menu #teammanage .sw i.on{box-shadow:inset 0 0 0 .4vh #07112b;outline:none}
#cos-menu #teammanage .sw i.on::after{content:'';position:absolute;inset:.5vh;border:.3vh solid #fff;clip-path:polygon(.5vh 0,100% 0,calc(100% - .5vh) 100%,0 100%)}
#cos-menu #teammanage .shapes{display:flex;gap:.9vh}
#cos-menu #teammanage .shapes div{flex:1;height:6vh;display:grid;place-items:center;background:rgba(255,255,255,.05);border:1px solid var(--line);clip-path:polygon(.8vh 0,100% 0,calc(100% - .8vh) 100%,0 100%)}
#cos-menu #teammanage .shapes div.on{background:rgba(255,210,63,.12);border-color:var(--yellow)}
#cos-menu #teammanage .shapes svg{height:4vh;width:auto}
#cos-menu #teammanage .seg{display:flex;gap:.8vh}
#cos-menu #teammanage .seg div{flex:1;height:5.4vh;display:flex;align-items:center;justify-content:center;gap:1vh;font-family:'BC';font-weight:700;font-style:italic;font-size:2.2vh;letter-spacing:.08em;color:#b9c7e8;background:rgba(255,255,255,.05);border:1px solid var(--line);clip-path:polygon(.8vh 0,100% 0,calc(100% - .8vh) 100%,0 100%)}
#cos-menu #teammanage .seg div.on{background:linear-gradient(100deg,#ffe58a,var(--yellow) 45%,#f2b400);color:#07112b;border-color:transparent}
#cos-menu #teammanage .foot2{display:flex;align-items:center;gap:1.4vh;margin-top:auto}
#cos-menu #teammanage .cost{display:flex;align-items:center;gap:1vh;font-family:'BC';font-weight:600;font-size:1.9vh;letter-spacing:.2em;color:var(--muted)}
#cos-menu #teammanage .cost b{display:flex;align-items:center;gap:.8vh;font-family:'BC';font-weight:900;font-style:italic;font-size:2.8vh;color:var(--yellow);letter-spacing:.02em}
#cos-menu #teammanage .cost b i{width:2.4vh;height:2.4vh;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff2a8,#ffd23f 45%,#c98a00)}
#cos-menu #teammanage .create{margin-left:auto;height:7vh;padding:0 3.4vh;display:flex;align-items:center;gap:1.4vh;background:linear-gradient(100deg,#ffe58a,var(--yellow) 45%,#f2b400);color:#07112b;font-family:'BC';font-weight:900;font-style:italic;font-size:3.2vh;letter-spacing:.1em;clip-path:polygon(1.2vh 0,100% 0,calc(100% - 1.2vh) 100%,0 100%)}
#cos-menu #teammanage .create::after{content:'';width:1.3vh;height:1.3vh;border-right:.4vh solid #07112b;border-top:.4vh solid #07112b;transform:rotate(45deg)}
#cos-menu #teammanage #s-join .grid{grid-template-columns:1fr}
#cos-menu #teammanage .list{padding:2.2vh 3vh 2vh}
#cos-menu #teammanage .tools{display:flex;gap:1.2vh;margin-top:1.4vh}
#cos-menu #teammanage .search{flex:1;height:6vh;display:flex;align-items:center;gap:1.4vh;padding:0 1.8vh;background:rgba(4,10,28,.6);border:1px solid var(--line);font-size:2.3vh;color:var(--muted);clip-path:polygon(1vh 0,100% 0,calc(100% - 1vh) 100%,0 100%)}
#cos-menu #teammanage .search svg{width:2.6vh;height:2.6vh;stroke:var(--muted);fill:none;stroke-width:2.4;stroke-linecap:round}
#cos-menu #teammanage .filt{height:6vh;display:flex;align-items:center;gap:1vh;padding:0 1.4vh;border:1px solid var(--line);background:rgba(255,255,255,.04);font-family:'BC';font-weight:600;font-size:1.8vh;letter-spacing:.2em;color:var(--muted)}
#cos-menu #teammanage .filt span{padding:.5vh 1.1vh;background:rgba(255,255,255,.06);color:#b9c7e8;clip-path:polygon(.5vh 0,100% 0,calc(100% - .5vh) 100%,0 100%)}
#cos-menu #teammanage .filt span.on{background:var(--yellow);color:#07112b}
#cos-menu #teammanage .rows{flex:1;overflow:hidden;margin-top:1vh}
#cos-menu #teammanage .tr{display:grid;grid-template-columns:6vh 1fr 12vh 10vh 12vh 14vh;align-items:center;gap:1.4vh;padding:1.1vh 0;border-top:1px solid rgba(255,255,255,.08)}
#cos-menu #teammanage .tr.hd{font-family:'BC';font-weight:600;font-size:1.7vh;letter-spacing:.24em;color:var(--muted);border-top:0;padding:.4vh 0}
#cos-menu #teammanage .tr .nm b{display:block;font-family:'BC';font-weight:700;font-style:italic;font-size:2.8vh}
#cos-menu #teammanage .tr .nm span{display:block;font-family:'BC';font-weight:600;font-size:1.7vh;letter-spacing:.16em;color:var(--muted);margin-top:.3vh}
#cos-menu #teammanage .tr .c{text-align:center;font-family:'BC';font-weight:900;font-style:italic;font-size:2.7vh}
#cos-menu #teammanage .tr .c.y{color:var(--yellow)}
#cos-menu #teammanage .tr .c small{display:block;font-weight:600;font-style:normal;font-size:1.5vh;letter-spacing:.2em;color:var(--muted)}
#cos-menu #teammanage .tag2{display:inline-flex;align-items:center;gap:.7vh;font-family:'BC';font-weight:700;font-size:1.7vh;letter-spacing:.18em;padding:.4vh 1vh;clip-path:polygon(.5vh 0,100% 0,calc(100% - .5vh) 100%,0 100%)}
#cos-menu #teammanage .tag2.open{background:rgba(63,209,106,.15);color:var(--green)}
#cos-menu #teammanage .tag2.inv{background:rgba(255,210,63,.12);color:var(--yellow)}
#cos-menu #teammanage #s-squad .grid{grid-template-columns:1fr}
#cos-menu #teammanage .sq{padding:2.2vh 3vh 2vh}
#cos-menu #teammanage .mrow{display:grid;grid-template-columns:5.6vh 1fr 7vh 8vh 7vh 7vh 8vh 36vh;align-items:center;gap:1.4vh;padding:1vh 0;border-top:1px solid rgba(255,255,255,.08)}
#cos-menu #teammanage .mrow.hd{font-family:'BC';font-weight:600;font-size:1.6vh;letter-spacing:.24em;color:var(--muted);border-top:0;padding:.4vh 0}
#cos-menu #teammanage .mrow.hd div{text-align:center}
#cos-menu #teammanage .mrow.hd div:nth-child(2){text-align:left}
#cos-menu #teammanage .mav{position:relative;width:5.4vh;height:5.4vh;clip-path:polygon(.7vh 0,100% 0,calc(100% - .7vh) 100%,0 100%);background:linear-gradient(135deg,color-mix(in srgb,var(--c) 70%,#fff),color-mix(in srgb,var(--c) 70%,#000));overflow:hidden;display:grid;place-items:center;font-family:'BC';font-weight:900;font-style:italic;font-size:2.4vh}
#cos-menu #teammanage .mav img{position:absolute;width:150%;left:-25%;top:-2%;image-rendering:pixelated}
#cos-menu #teammanage .mnm b{display:flex;align-items:center;gap:1vh;font-family:'BC';font-weight:700;font-style:italic;font-size:2.8vh}
#cos-menu #teammanage .mnm span{display:block;font-family:'BC';font-weight:600;font-size:1.7vh;letter-spacing:.18em;color:var(--muted);margin-top:.3vh}
#cos-menu #teammanage .mnm span em{font-style:normal;color:var(--green)}
#cos-menu #teammanage .role{font-family:'BC';font-weight:900;font-style:italic;font-size:1.6vh;letter-spacing:.12em;padding:.3vh .9vh;clip-path:polygon(.4vh 0,100% 0,calc(100% - .4vh) 100%,0 100%)}
#cos-menu #teammanage .role.cap{background:var(--yellow);color:#07112b}
#cos-menu #teammanage .role.vice{background:rgba(255,210,63,.18);color:var(--yellow)}
#cos-menu #teammanage .role.you{background:rgba(47,107,255,.25);color:#9dbcff}
#cos-menu #teammanage .pos{justify-self:center;font-family:'BC';font-weight:900;font-style:italic;font-size:2.2vh;padding:.3vh 1vh;background:rgba(255,255,255,.08);border:1px solid var(--line);clip-path:polygon(.5vh 0,100% 0,calc(100% - .5vh) 100%,0 100%)}
#cos-menu #teammanage .num{text-align:center;font-family:'BC';font-weight:900;font-style:italic;font-size:2.6vh}
#cos-menu #teammanage .num.y{color:var(--yellow)}
#cos-menu #teammanage .acts{display:flex;gap:.8vh;justify-content:flex-end}
#cos-menu #teammanage .b.sm{height:4.4vh;min-width:auto;padding:0 1.3vh;font-size:1.8vh}
#cos-menu #teammanage .b.ghostb{background:rgba(255,255,255,.06);border:1px solid var(--line);color:#b9c7e8}
#cos-menu #teammanage .b.kick{background:rgba(255,59,71,.12);border:1px solid rgba(255,59,71,.45);color:var(--red)}
#cos-menu #teammanage .mrow.empty .mav{background:rgba(255,255,255,.04);border:1px dashed rgba(255,255,255,.2);color:rgba(255,255,255,.3)}
#cos-menu #teammanage .mrow.empty .mnm b{color:#5d6f99}
#cos-menu #teammanage .topr .b{height:9vh;padding:0 2.6vh;font-size:2.8vh}
#cos-menu #teammanage .invite{background:linear-gradient(100deg,#ffe58a,var(--yellow) 45%,#f2b400);color:#07112b}
#cos-menu #teammanage .invite::before{content:'+';font-size:3.4vh;margin-right:.8vh;line-height:0}
#cos-menu #teammanage #s-kits .form{gap:1vh}
#cos-menu #teammanage #s-kits .sw i{height:4.4vh}
#cos-menu #teammanage #s-kits .shapes div{height:5.2vh}
#cos-menu #teammanage #s-kits .ktabs svg{height:5vh}
#cos-menu #teammanage #s-kits .seg div{height:4.8vh}
#cos-menu #teammanage #s-kits .grid{grid-template-columns:1fr 1.15fr}
#cos-menu #teammanage .ktabs{display:flex;gap:.8vh}
#cos-menu #teammanage .ktabs div{flex:1;display:flex;flex-direction:column;align-items:center;gap:.4vh;padding:1vh 0 .8vh;background:rgba(255,255,255,.05);border:1px solid var(--line);font-family:'BC';font-weight:600;font-size:1.7vh;letter-spacing:.22em;color:var(--muted)}
#cos-menu #teammanage .ktabs div.on{border:2px solid var(--yellow);background:rgba(255,210,63,.08);color:var(--text)}
#cos-menu #teammanage .ktabs svg{height:6vh;width:auto}
#cos-menu #teammanage .prev .bigkit{width:22vh;filter:drop-shadow(0 1.4vh 2vh rgba(0,0,0,.5))}
#cos-menu #teammanage .prev .row2{display:flex;align-items:center;gap:3vh}
#cos-menu #teammanage .prev .row2 .bigcrest{width:15vh;height:16vh}
#cos-menu #teammanage .pat{display:flex;gap:.9vh}
#cos-menu #teammanage .pat div{flex:1;height:5.2vh;display:grid;place-items:center;background:rgba(255,255,255,.05);border:1px solid var(--line);clip-path:polygon(.8vh 0,100% 0,calc(100% - .8vh) 100%,0 100%)}
#cos-menu #teammanage .pat div.on{background:rgba(255,210,63,.12);border-color:var(--yellow)}
#cos-menu #teammanage .pat svg{height:4.6vh;width:auto}
#cos-menu #teammanage .save{margin-left:auto;height:7vh;padding:0 3.4vh;display:flex;align-items:center;gap:1.4vh;background:linear-gradient(100deg,#ffe58a,var(--yellow) 45%,#f2b400);color:#07112b;font-family:'BC';font-weight:900;font-style:italic;font-size:3.2vh;letter-spacing:.1em;clip-path:polygon(1.2vh 0,100% 0,calc(100% - 1.2vh) 100%,0 100%)}
#cos-menu #teammanage .note{font-family:'BC';font-weight:600;font-size:1.8vh;letter-spacing:.2em;color:var(--muted)}

/* ===== SOCIAL OVERLAY (online · friends · requests · lobby chat · team chat · messages) ===== */
#cos-menu #soc{position:fixed;inset:0;z-index:10}
#cos-menu #soc .dim{position:absolute;inset:0;background:rgba(2,6,18,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
#cos-menu #soc .win{position:absolute;left:12vw;top:max(4vh,env(safe-area-inset-top));bottom:max(4vh,env(safe-area-inset-bottom));width:76vw;display:flex;flex-direction:column;
  clip-path:polygon(2.4vh 0,100% 0,calc(100% - 2.4vh) 100%,0 100%);background:linear-gradient(180deg,rgba(14,30,72,.96),rgba(8,18,46,.94));box-shadow:0 2vh 6vh rgba(0,0,0,.6)}
#cos-menu #soc .win::after{content:'';position:absolute;left:0;right:0;bottom:0;height:.9vh;background:var(--yellow);box-shadow:0 0 2vh rgba(255,210,63,.6)}
#cos-menu #soc .hd{display:flex;align-items:center;gap:1.2vh;padding:2vh 2.6vh 1.6vh 3.4vh;border-bottom:1px solid var(--line)}
#cos-menu #soc .tabs{display:flex;gap:.8vh;flex:1}
#cos-menu #soc .tab{height:6.6vh;padding:0 1.8vh;display:flex;align-items:center;gap:1.2vh;font-family:'BC';font-weight:700;font-style:italic;font-size:2.5vh;letter-spacing:.06em;color:#b9c7e8;background:rgba(255,255,255,.05);border:1px solid var(--line);clip-path:polygon(1vh 0,100% 0,calc(100% - 1vh) 100%,0 100%);cursor:pointer;white-space:nowrap}
#cos-menu #soc .tab b{min-width:2.8vh;height:2.8vh;border-radius:99px;background:rgba(255,255,255,.14);color:#fff;font-family:'BC';font-weight:900;font-style:normal;font-size:1.9vh;display:grid;place-items:center;padding:0 .7vh}
#cos-menu #soc .tab.on{background:linear-gradient(100deg,#ffe58a,var(--yellow) 45%,#f2b400);color:#07112b;border-color:transparent}
#cos-menu #soc .tab.on b{background:#07112b;color:var(--yellow)}
#cos-menu #soc .tab b.red,#cos-menu #soc .tab.on b.red{background:var(--red);color:#fff}
#cos-menu #soc .tab b:empty{display:none}
#cos-menu #soc .reg{height:6.6vh;display:flex;align-items:center;gap:1.2vh;padding:0 1.8vh;font-family:'BC';font-weight:600;font-size:2vh;letter-spacing:.24em;color:var(--muted);border:1px solid var(--line);background:rgba(255,255,255,.04)}
#cos-menu #soc .reg b{font-family:'BC';font-weight:900;font-style:italic;font-size:2.8vh;color:var(--text);letter-spacing:.04em}
#cos-menu #soc .reg i{width:1.3vh;height:1.3vh;border-radius:50%;background:var(--green);box-shadow:0 0 1vh var(--green)}
#cos-menu #soc .x{width:6.6vh;height:6.6vh;display:grid;place-items:center;border:1px solid var(--line);background:rgba(255,255,255,.05);position:relative;cursor:pointer}
#cos-menu #soc .x::before,#cos-menu #soc .x::after{content:'';position:absolute;width:2.4vh;height:.4vh;background:var(--text);transform:rotate(45deg)}
#cos-menu #soc .x::after{transform:rotate(-45deg)}
#cos-menu #soc .body{flex:1;min-height:0;display:none;flex-direction:column}
#cos-menu #soc .body.on{display:flex}
#cos-menu #soc .msgs{flex:1;overflow:auto;padding:2vh 4vh 1vh 3.4vh;display:flex;flex-direction:column;gap:1.4vh;justify-content:flex-end}
#cos-menu #soc .day{align-self:center;font-family:'BC';font-weight:600;font-size:1.8vh;letter-spacing:.3em;color:var(--muted);padding:.4vh 1.6vh;border:1px solid var(--line);margin-bottom:.6vh}
#cos-menu #soc .m{display:flex;align-items:flex-end;gap:1.4vh;max-width:78%}
#cos-menu #soc .m.me{align-self:flex-end;flex-direction:row-reverse}
#cos-menu #soc .av{width:5vh;height:5vh;flex:none;display:grid;place-items:center;clip-path:polygon(.7vh 0,100% 0,calc(100% - .7vh) 100%,0 100%);background:linear-gradient(135deg,color-mix(in srgb,var(--c) 70%,#fff),color-mix(in srgb,var(--c) 70%,#000));font-family:'BC';font-weight:900;font-style:italic;font-size:2.4vh;color:#fff;text-shadow:0 .3vh 0 rgba(0,0,0,.3)}
#cos-menu #soc .bub{padding:1.2vh 1.8vh 1.1vh;background:rgba(255,255,255,.07);border:1px solid var(--line);clip-path:polygon(1vh 0,100% 0,calc(100% - 1vh) 100%,0 100%)}
#cos-menu #soc .m.me .bub{background:linear-gradient(100deg,#3b78ff,#2456d8);border-color:transparent}
#cos-menu #soc .bub .who{display:flex;align-items:baseline;gap:1.2vh;margin-bottom:.4vh}
#cos-menu #soc .bub .who b{font-family:'BC';font-weight:700;font-style:italic;font-size:2.3vh;letter-spacing:.06em;color:color-mix(in srgb,var(--c) 45%,#fff)}
#cos-menu #soc .m.me .bub .who b{color:#ffe27a}
#cos-menu #soc .bub .who span{font-family:'BC';font-weight:600;font-size:1.7vh;letter-spacing:.14em;color:var(--muted)}
#cos-menu #soc .m.me .bub .who span{color:rgba(255,255,255,.65)}
#cos-menu #soc .bub p{font-size:2.5vh;line-height:1.3;color:var(--text)}
#cos-menu #soc .in{display:flex;gap:1.2vh;padding:1.6vh 2.6vh 2.4vh 3.4vh;border-top:1px solid var(--line)}
#cos-menu #soc .field{flex:1;height:7vh;display:flex;align-items:center;padding:0 2vh;background:rgba(4,10,28,.6);border:1px solid var(--line);font-size:2.5vh;color:var(--muted);clip-path:polygon(1vh 0,100% 0,calc(100% - 1vh) 100%,0 100%)}
#cos-menu #soc .field.typing{color:var(--text)}
#cos-menu #soc .field.typing::after{content:'';width:.3vh;height:3.2vh;background:var(--yellow);margin-left:.4vh}
#cos-menu #soc .send{height:7vh;padding:0 3vh;display:flex;align-items:center;background:linear-gradient(100deg,#ffe58a,var(--yellow) 45%,#f2b400);color:#07112b;font-family:'BC';font-weight:900;font-style:italic;font-size:3vh;letter-spacing:.1em;clip-path:polygon(1vh 0,100% 0,calc(100% - 1vh) 100%,0 100%)}
#cos-menu #soc .empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1vh;text-align:center;padding:0 6vw}
#cos-menu #soc .empty .big{font-family:'BC';font-weight:900;font-style:italic;font-size:6vh;line-height:.9}
#cos-menu #soc .empty .big em{font-style:inherit;color:var(--yellow)}
#cos-menu #soc .empty p{font-size:2.4vh;color:#b9c7e8;line-height:1.4;max-width:34vw}
#cos-menu #soc .empty .cta{margin-top:2vh;height:6.6vh;padding:0 3vh;display:flex;align-items:center;gap:1.4vh;background:linear-gradient(100deg,#ffe58a,var(--yellow) 45%,#f2b400);color:#07112b;font-family:'BC';font-weight:900;font-style:italic;font-size:2.8vh;letter-spacing:.1em;clip-path:polygon(1vh 0,100% 0,calc(100% - 1vh) 100%,0 100%)}
#cos-menu #soc .empty .cta::after{content:'';width:1.2vh;height:1.2vh;border-right:.35vh solid #07112b;border-top:.35vh solid #07112b;transform:rotate(45deg)}
#cos-menu #soc .empty .ghost{position:absolute;right:3vh;bottom:4vh;font-family:'BC';font-weight:900;font-style:italic;font-size:22vh;line-height:.8;color:rgba(255,255,255,.04);pointer-events:none}
#cos-menu #soc .who-bar{display:flex;align-items:center;gap:1.6vh;padding:1.4vh 2.6vh 1.2vh 3.4vh;border-bottom:1px solid var(--line)}
#cos-menu #soc .who-bar .bk{width:5vh;height:5vh;display:grid;place-items:center;border:1px solid var(--line);background:rgba(255,255,255,.05);position:relative}
#cos-menu #soc .who-bar .bk::after{content:'';width:1.3vh;height:1.3vh;border-left:.35vh solid var(--text);border-bottom:.35vh solid var(--text);transform:rotate(45deg);margin-left:.5vh}
#cos-menu #soc .who-bar b{font-family:'BC';font-weight:900;font-style:italic;font-size:3.2vh;letter-spacing:.04em}
#cos-menu #soc .who-bar span{display:flex;align-items:center;gap:.8vh;font-family:'BC';font-weight:600;font-size:1.8vh;letter-spacing:.22em;color:var(--muted);margin-top:.3vh}
#cos-menu #soc .who-bar span i{width:1.1vh;height:1.1vh;border-radius:50%;background:var(--green);box-shadow:0 0 1vh var(--green)}
#cos-menu #soc .who-bar .act{margin-left:auto;height:5vh;padding:0 1.8vh;display:flex;align-items:center;border:1px solid var(--line);background:rgba(255,255,255,.05);font-family:'BC';font-weight:700;font-style:italic;font-size:2.2vh;letter-spacing:.1em;color:#b9c7e8}
#cos-menu #soc .tools{display:flex;gap:1.2vh;padding:1.6vh 2.6vh 1.2vh 3.4vh}
#cos-menu #soc .search{flex:1;height:6.2vh;display:flex;align-items:center;gap:1.4vh;padding:0 1.8vh;background:rgba(4,10,28,.6);border:1px solid var(--line);font-size:2.3vh;color:var(--muted);clip-path:polygon(1vh 0,100% 0,calc(100% - 1vh) 100%,0 100%)}
#cos-menu #soc .search svg{width:2.6vh;height:2.6vh;stroke:var(--muted);fill:none;stroke-width:2.4;stroke-linecap:round}
#cos-menu #soc .notif{height:6.2vh;display:flex;align-items:center;gap:1.4vh;padding:0 1.8vh;border:1px solid var(--line);background:rgba(255,255,255,.04);font-family:'BC';font-weight:600;font-size:1.9vh;letter-spacing:.2em;color:var(--muted);white-space:nowrap}
#cos-menu #soc .notif .tg{width:7vh;height:3.8vh;border-radius:99px;background:rgba(255,255,255,.12);border:1px solid var(--line);position:relative}
#cos-menu #soc .notif .tg::after{content:'';position:absolute;top:.3vh;left:.3vh;width:3vh;height:3vh;border-radius:50%;background:#fff;box-shadow:0 .3vh .8vh rgba(0,0,0,.4)}
#cos-menu #soc .notif .tg.on{background:var(--green);border-color:transparent}
#cos-menu #soc .notif .tg.on::after{left:3.5vh}
#cos-menu #soc .list{flex:1;overflow:auto;padding:0 2.6vh 1.6vh 3.4vh}
#cos-menu #soc .cv{display:flex;align-items:center;gap:1.6vh;padding:1.3vh 0;border-top:1px solid rgba(255,255,255,.08)}
#cos-menu #soc .cv:first-child{border-top:0}
#cos-menu #soc .cv .tx{flex:1;min-width:0}
#cos-menu #soc .cv .tx b{display:block;font-family:'BC';font-weight:700;font-style:italic;font-size:2.8vh;letter-spacing:.04em}
#cos-menu #soc .cv .tx span{display:block;font-size:2.1vh;color:#b9c7e8;margin-top:.3vh;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cos-menu #soc .cv.unread .tx span{color:var(--text)}
#cos-menu #soc .cv .tm{font-family:'BC';font-weight:600;font-size:1.8vh;letter-spacing:.16em;color:var(--muted);white-space:nowrap}
#cos-menu #soc .cv .n{min-width:3.2vh;height:3.2vh;border-radius:99px;background:var(--yellow);color:#07112b;font-family:'BC';font-weight:900;font-size:2vh;display:grid;place-items:center;padding:0 .8vh}
#cos-menu #soc .cv .del{width:4.4vh;height:4.4vh;display:grid;place-items:center;border:1px solid var(--line);background:rgba(255,255,255,.04);position:relative;flex:none}
#cos-menu #soc .cv .del::before,#cos-menu #soc .cv .del::after{content:'';position:absolute;width:1.6vh;height:.3vh;background:var(--muted);transform:rotate(45deg)}
#cos-menu #soc .cv .del::after{transform:rotate(-45deg)}
#cos-menu #soc .cv .on{width:1.2vh;height:1.2vh;border-radius:50%;background:var(--green);box-shadow:0 0 1vh var(--green);position:absolute;right:-.3vh;top:-.3vh}
#cos-menu #soc .avw{position:relative;flex:none}
#cos-menu #soc .tab b.red{background:var(--red)}
#cos-menu #soc .filt{height:6.2vh;display:flex;align-items:center;gap:1.2vh;padding:0 1.6vh;border:1px solid var(--line);background:rgba(255,255,255,.04);font-family:'BC';font-weight:600;font-size:1.8vh;letter-spacing:.2em;color:var(--muted);white-space:nowrap}
#cos-menu #soc .filt span{padding:.5vh 1.1vh;background:rgba(255,255,255,.06);color:#b9c7e8;clip-path:polygon(.5vh 0,100% 0,calc(100% - .5vh) 100%,0 100%)}
#cos-menu #soc .filt span.on{background:var(--yellow);color:#07112b}
#cos-menu #soc .body{display:none;flex:1;min-height:0;flex-direction:column}
#cos-menu #soc .body.on{display:flex}
#cos-menu #soc .pl{display:flex;align-items:center;gap:1.6vh;padding:1.3vh 0;border-top:1px solid rgba(255,255,255,.08)}
#cos-menu #soc .pl:first-child{border-top:0}
#cos-menu #soc .pavw{position:relative;flex:none}
#cos-menu #soc .pav{width:5.4vh;height:5.4vh;display:grid;place-items:center;clip-path:polygon(.7vh 0,100% 0,calc(100% - .7vh) 100%,0 100%);background:linear-gradient(135deg,color-mix(in srgb,var(--c) 70%,#fff),color-mix(in srgb,var(--c) 70%,#000));font-family:'BC';font-weight:900;font-style:italic;font-size:2.6vh;color:#fff;text-shadow:0 .3vh 0 rgba(0,0,0,.3);overflow:hidden}
#cos-menu #soc .pav img{width:150%;margin-top:-10%;image-rendering:pixelated}
#cos-menu #soc .pst{position:absolute;right:-.4vh;top:-.4vh;width:1.4vh;height:1.4vh;border-radius:50%;background:var(--green);box-shadow:0 0 1vh var(--green);border:2px solid #0b1840}
#cos-menu #soc .pst.match{background:var(--yellow);box-shadow:0 0 1vh var(--yellow)}
#cos-menu #soc .pst.off{background:#5d6f99;box-shadow:none}
#cos-menu #soc .ptx{flex:1;min-width:0}
#cos-menu #soc .ptx b{display:flex;align-items:center;gap:1vh;font-family:'BC';font-weight:700;font-style:italic;font-size:2.9vh;letter-spacing:.04em}
#cos-menu #soc .ptx b i{width:.5vh;height:2.2vh;background:var(--tc,var(--blue));transform:skewX(-14deg);box-shadow:0 0 .8vh var(--tc,var(--blue))}
#cos-menu #soc .ptx b small{font-family:'BC';font-weight:600;font-style:normal;font-size:1.7vh;letter-spacing:.2em;color:var(--muted)}
#cos-menu #soc .ptx span{display:block;font-family:'BC';font-weight:600;font-size:1.8vh;letter-spacing:.18em;color:var(--muted);margin-top:.4vh}
#cos-menu #soc .ptx span em{font-style:normal;color:var(--green)}
#cos-menu #soc .ptx span em.match{color:var(--yellow)}
#cos-menu #soc .rt{display:flex;align-items:center;gap:1vh;flex:none}
#cos-menu #soc .rt .r{font-family:'BC';font-weight:900;font-style:italic;font-size:2.8vh;color:var(--yellow);width:7vh;text-align:center}
#cos-menu #soc .rt .r small{display:block;font-weight:600;font-style:normal;font-size:1.4vh;letter-spacing:.24em;color:var(--muted)}
#cos-menu #soc .b{height:5.2vh;min-width:13vh;padding:0 1.6vh;display:flex;align-items:center;justify-content:center;gap:1vh;font-family:'BC';font-weight:900;font-style:italic;font-size:2.2vh;letter-spacing:.08em;clip-path:polygon(.8vh 0,100% 0,calc(100% - .8vh) 100%,0 100%);cursor:pointer;white-space:nowrap}
#cos-menu #soc .b.msg{background:rgba(255,255,255,.08);border:1px solid var(--line);color:var(--text)}
#cos-menu #soc .b.add{background:linear-gradient(100deg,#ffe58a,var(--yellow) 45%,#f2b400);color:#07112b}
#cos-menu #soc .b.add::before{content:'+';font-size:2.8vh;line-height:0}
#cos-menu #soc .b.pend{background:rgba(255,255,255,.05);border:1px dashed rgba(255,255,255,.3);color:var(--muted);font-weight:700}
#cos-menu #soc .b.fr{background:rgba(63,209,106,.14);border:1px solid rgba(63,209,106,.5);color:var(--green)}
#cos-menu #soc .b.fr::before{content:'';width:1.1vh;height:.6vh;border-left:.35vh solid var(--green);border-bottom:.35vh solid var(--green);transform:translateY(-.2vh) rotate(-45deg)}
#cos-menu #soc .b.inv{background:var(--blue);color:#fff}
#cos-menu #soc .b.acc{background:var(--green);color:#07112b}
#cos-menu #soc .b.dec{background:rgba(255,59,71,.15);border:1px solid rgba(255,59,71,.5);color:var(--red)}
#cos-menu #soc .sec{font-family:'BC';font-weight:600;font-size:1.8vh;letter-spacing:.3em;color:var(--muted);padding:1.6vh 0 .6vh;display:flex;align-items:center;gap:1.4vh}
#cos-menu #soc .sec::after{content:'';flex:1;height:1px;background:var(--line)}
#cos-menu #soc .sec.req{color:var(--yellow);margin-top:1vh}
#cos-menu #soc .sec.req::after{background:rgba(255,210,63,.35)}
#cos-menu #soc .pl.req{background:linear-gradient(90deg,rgba(255,210,63,.08),transparent 60%);box-shadow:inset .5vh 0 0 var(--yellow);padding-left:1.4vh}
#cos-menu #soc .tab b + b{margin-left:-.4vh}
#cos-menu #soc .reg{margin-left:auto}

/* ===== WHAT'S NEW OVERLAY + versie-pil ===== */
#cos-menu #lobby .ver{cursor:pointer;padding:1.4vh 2.2vh;border-radius:99px;border:1px solid transparent;display:flex;align-items:center;gap:1.2vh}
#cos-menu #lobby .ver.new{color:#07112b;background:linear-gradient(100deg,#ffe58a,var(--yellow) 45%,#f2b400);border-color:transparent;box-shadow:0 0 2.4vh rgba(255,210,63,.65);animation:verpulse 1.6s ease-in-out infinite;font-weight:700}
#cos-menu #lobby .ver.new b{font-family:'BC';font-weight:900;font-style:italic;font-size:1.9vh;letter-spacing:.12em;background:#07112b;color:var(--yellow);padding:.3vh .8vh;clip-path:polygon(.4vh 0,100% 0,calc(100% - .4vh) 100%,0 100%)}
@keyframes verpulse{0%,100%{box-shadow:0 0 1.6vh rgba(255,210,63,.45)}50%{box-shadow:0 0 3.6vh rgba(255,210,63,.95)}}
#cos-menu #wn{position:fixed;inset:0;z-index:10}
#cos-menu #wn .dim{position:absolute;inset:0;background:rgba(2,6,18,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
#cos-menu #wn .win{position:absolute;left:14vw;top:max(4vh,env(safe-area-inset-top));bottom:max(4vh,env(safe-area-inset-bottom));width:72vw;display:flex;flex-direction:column;
  clip-path:polygon(2.4vh 0,100% 0,calc(100% - 2.4vh) 100%,0 100%);background:linear-gradient(180deg,rgba(14,30,72,.96),rgba(8,18,46,.94));box-shadow:0 2vh 6vh rgba(0,0,0,.6)}
#cos-menu #wn .win::after{content:'';position:absolute;left:0;right:0;bottom:0;height:.9vh;background:var(--yellow);box-shadow:0 0 2vh rgba(255,210,63,.6)}
#cos-menu #wn .hd{display:flex;align-items:center;gap:2vh;padding:2vh 2.6vh 1.6vh 3.4vh;border-bottom:1px solid var(--line)}
#cos-menu #wn .hd .bar{width:1.4vh;height:5.6vh;background:var(--yellow);transform:skewX(-14deg);box-shadow:0 0 2vh rgba(255,210,63,.6)}
#cos-menu #wn .hd .t{font-family:'BC';font-weight:900;font-style:italic;font-size:4.6vh;line-height:.9}
#cos-menu #wn .hd .d{font-family:'BC';font-weight:600;font-size:1.9vh;letter-spacing:.26em;color:var(--muted);margin-top:.5vh}
#cos-menu #wn .hd .cur{margin-left:auto;height:6.2vh;display:flex;align-items:center;gap:1.4vh;padding:0 1.8vh;border:1px solid var(--line);background:rgba(255,255,255,.04);font-family:'BC';font-weight:600;font-size:1.9vh;letter-spacing:.24em;color:var(--muted)}
#cos-menu #wn .hd .cur b{font-family:'BC';font-weight:900;font-style:italic;font-size:2.8vh;color:var(--yellow);letter-spacing:.04em}
#cos-menu #wn .x{width:6.2vh;height:6.2vh;display:grid;place-items:center;border:1px solid var(--line);background:rgba(255,255,255,.05);position:relative;cursor:pointer}
#cos-menu #wn .x::before,#cos-menu #wn .x::after{content:'';position:absolute;width:2.4vh;height:.4vh;background:var(--text);transform:rotate(45deg)}
#cos-menu #wn .x::after{transform:rotate(-45deg)}
#cos-menu #wn .body{flex:1;min-height:0;display:grid;grid-template-columns:17vw 1fr}
#cos-menu #wn .vers{border-right:1px solid var(--line);padding:1.6vh 0;overflow:auto}
#cos-menu #wn .v{display:flex;align-items:center;gap:1.4vh;padding:1.5vh 2.6vh 1.5vh 3.4vh;cursor:pointer;border-left:.6vh solid transparent}
#cos-menu #wn .v b{font-family:'BC';font-weight:900;font-style:italic;font-size:3vh;letter-spacing:.02em;color:#b9c7e8}
#cos-menu #wn .v span{font-family:'BC';font-weight:600;font-size:1.7vh;letter-spacing:.2em;color:var(--muted);margin-left:auto}
#cos-menu #wn .v.on{border-left-color:var(--yellow);background:linear-gradient(90deg,rgba(255,210,63,.12),transparent)}
#cos-menu #wn .v.on b{color:var(--yellow)}
#cos-menu #wn .v .nw{font-family:'BC';font-weight:900;font-style:italic;font-size:1.6vh;letter-spacing:.12em;background:var(--yellow);color:#07112b;padding:.3vh .7vh;clip-path:polygon(.4vh 0,100% 0,calc(100% - .4vh) 100%,0 100%)}
#cos-menu #wn .log{overflow:auto;padding:2vh 3vh 2.4vh 3vh}
#cos-menu #wn .rel{margin-bottom:2.6vh}
#cos-menu #wn .rel .rh{display:flex;align-items:baseline;gap:1.6vh;margin-bottom:1.2vh}
#cos-menu #wn .rel .rh b{font-family:'BC';font-weight:900;font-style:italic;font-size:4vh;color:var(--yellow)}
#cos-menu #wn .rel .rh span{font-family:'BC';font-weight:600;font-size:1.9vh;letter-spacing:.24em;color:var(--muted)}
#cos-menu #wn .rel .rh em{font-style:normal;font-family:'BC';font-weight:700;font-size:2.4vh;color:#b9c7e8;margin-left:auto}
#cos-menu #wn .it{display:flex;align-items:flex-start;gap:1.6vh;padding:1.1vh 0;border-top:1px solid rgba(255,255,255,.07)}
#cos-menu #wn .it:first-of-type{border-top:0}
#cos-menu #wn .tag{flex:none;min-width:9vh;height:3.4vh;display:flex;align-items:center;justify-content:center;font-family:'BC';font-weight:900;font-style:italic;font-size:1.9vh;letter-spacing:.14em;color:#07112b;clip-path:polygon(.6vh 0,100% 0,calc(100% - .6vh) 100%,0 100%);margin-top:.2vh}
#cos-menu #wn .tag.add{background:var(--green)}
#cos-menu #wn .tag.fix{background:#6fa3ff}
#cos-menu #wn .tag.chg{background:var(--yellow)}
#cos-menu #wn .tag.rem{background:var(--red);color:#fff}
#cos-menu #wn .it p{font-size:2.3vh;line-height:1.35;color:var(--text)}
#cos-menu #wn .it p small{display:block;font-size:2vh;color:#b9c7e8;margin-top:.3vh}

/* ===== INTERACTIE: pressed states + schermovergangen ===== */
/* COS-FIX (overgangen): sneller dan in het pakket (user: "voelt alsof het even vastzit"):
   uit .18->.12s, in .3->.22s, rise .38->.26s (1.6vh i.p.v. 2.4vh), overlays
   .26->.2s / sluiten .16->.13s. Timers in js/menu.js lopen hiermee in de pas. */
#cos-menu .cos-tap{transition:transform .22s cubic-bezier(.2,.9,.3,1.35),filter .22s ease,box-shadow .22s ease;will-change:transform}
#cos-menu .cos-tap.is-pressed{transform:scale(.962) translateY(.35vh);filter:brightness(.86) saturate(1.05);transition-duration:.07s}
#cos-menu .pan.cos-tap.is-pressed::after{box-shadow:none}
#cos-menu .glass.cos-tap.is-pressed{box-shadow:0 .4vh 1vh rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06)}
#cos-menu .pan.yel.cos-tap.is-pressed,#cos-menu .btn.cos-tap.is-pressed,#cos-menu .send.cos-tap.is-pressed,#cos-menu .cta.cos-tap.is-pressed,#cos-menu .buy.cos-tap.is-pressed{filter:brightness(.92)}
#cos-menu .tg.cos-tap.is-pressed{transform:scale(.94)}
#cos-menu .tab.cos-tap.is-pressed,#cos-menu .nav .it.cos-tap.is-pressed{transform:scale(.975) translateY(.25vh)}
/* COS-FIX (overgangen): schermwissel = pure crossfade (user: "overgang niet mooi, laat het infaden of wegfaden") -
   was: 3vw schuiven + schalen + gestaffeld omhoog komende panelen (cos-rise). */
@keyframes cos-out{to{opacity:0}}
@keyframes cos-in{from{opacity:0}to{opacity:1}}
@keyframes cos-rise{from{opacity:0;transform:translateY(1.6vh)}to{opacity:1;transform:none}}
@keyframes cos-fade{from{opacity:0}to{opacity:1}}
@keyframes cos-up{from{opacity:0;transform:translateY(3vh) scale(.985)}to{opacity:1;transform:none}}
@keyframes cos-down{to{opacity:0;transform:translateY(3vh) scale(.985)}}
#cos-menu .scr.leaving{display:block;animation:cos-out .2s ease-in both;pointer-events:none}
/* COS-FIX (overgangen): nieuw scherm start pas na 120 ms (bijna weggefade oud scherm) - anders lag het er
   direct bovenop en zag je het wegvagen niet (user: "lijkt alsof hij van pagina's springt") */
#cos-menu .scr.entering{animation:cos-in .3s ease-out .12s both}
#cos-menu .scr.entering .cos-rise{animation:none}
#cos-menu #soc.on .dim,#cos-menu #wn.on .dim{animation:cos-fade .16s ease both}
#cos-menu #soc.on .win,#cos-menu #wn.on .win{animation:cos-up .2s cubic-bezier(.2,.8,.2,1) both}
#cos-menu #soc.closing .win,#cos-menu #wn.closing .win{animation:cos-down .13s ease-in both}
#cos-menu #soc.closing .dim,#cos-menu #wn.closing .dim{animation:cos-fade .13s ease-in reverse both}
@media (prefers-reduced-motion:reduce){#cos-menu .scr.leaving,#cos-menu .scr.entering,#cos-menu .scr.entering .cos-rise,#cos-menu #soc .win,#cos-menu #wn .win,#cos-menu #soc .dim,#cos-menu #wn .dim{animation:none!important}}
/* COS-FIX (tikvlak): versie-knop op de andere schermen (niet de lobby-pil) was alleen het tekstje: ~62x22 px
   tikvlak, op de telefoon vaak 4-5x drukken (user-feedback). Onzichtbaar groter tikvlak:
   opvulling + even grote negatieve marge, dus de plek in de onderbalk blijft gelijk. */
#cos-menu .scr:not(#lobby) .ver{padding:2.2vh 3vh;margin:-2.2vh -3vh}
/* COS-FIX (bug): op de iPhone viel SAVE half buiten het Kits-paneel - inhoud was al 11px hoger
   dan het paneel (gemeten). Keuzerijen iets compacter zodat alles met marge past. */
#cos-menu #teammanage #s-kits .ktabs div{padding:.6vh 0 .5vh}
#cos-menu #teammanage #s-kits .ktabs svg{height:4vh}
#cos-menu #teammanage #s-kits .sw i{height:3.8vh}
#cos-menu #teammanage #s-kits .pat div{height:4.4vh}
#cos-menu #teammanage #s-kits .pat svg{height:3.8vh}
#cos-menu #teammanage #s-kits .shapes div{height:4.4vh}
#cos-menu #teammanage #s-kits .shapes svg{height:3.4vh}

/* Clash of Soccer – Leave team. Toevoegen aan de menu-CSS (gescoped onder #cos-menu). */
/* knop rechtsboven op het Team-scherm, links van TEAM RATING */
#cos-menu .cos-leave{height:9vh;display:flex;align-items:center;gap:1.2vh;padding:0 2.4vh;border-radius:1.6vh;cursor:pointer;
  font-family:'BC';font-weight:700;font-style:italic;font-size:2.6vh;letter-spacing:.1em;color:#ff8a92;
  background:linear-gradient(180deg,rgba(60,14,28,.55),rgba(30,8,18,.55));border:1px solid rgba(255,59,71,.45);box-shadow:0 1.4vh 3vh rgba(0,0,0,.35)}
#cos-menu .cos-leave svg{width:2.6vh;height:2.6vh;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
#cos-menu .cos-leave.is-pressed,#cos-menu .cos-leave:active{transform:scale(.965) translateY(.35vh);filter:brightness(.9)}

/* bevestigingsvenster */
#cos-menu #leave{position:absolute;inset:0;z-index:20;display:none;align-items:center;justify-content:center}
#cos-menu #leave.on{display:flex}
#cos-menu #leave .dim{position:absolute;inset:0;background:rgba(2,6,18,.7);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:cos-fade .2s ease both}
#cos-menu #leave .win{position:relative;width:62vw;max-height:88vh;overflow:hidden;padding:3.2vh 3.6vh 3vh;
  clip-path:polygon(2.4vh 0,100% 0,calc(100% - 2.4vh) 100%,0 100%);background:linear-gradient(180deg,rgba(14,30,72,.97),rgba(8,18,46,.96));box-shadow:0 2vh 6vh rgba(0,0,0,.6);animation:cos-up .26s cubic-bezier(.2,.8,.2,1) both}
#cos-menu #leave .win::after{content:'';position:absolute;left:0;right:0;bottom:0;height:.9vh;background:var(--red);box-shadow:0 0 2vh rgba(255,59,71,.6)}
#cos-menu #leave .top{display:flex;align-items:center;gap:2.4vh}
#cos-menu #leave .crest{width:10vh;height:11vh;flex:none;filter:drop-shadow(0 1vh 1.4vh rgba(0,0,0,.5))}
#cos-menu #leave .crest svg{width:100%;height:100%}
#cos-menu #leave .k{font-family:'BC';font-weight:600;font-size:1.9vh;letter-spacing:.3em;color:#ff8a92}
#cos-menu #leave .t{font-family:'BC';font-weight:900;font-style:italic;font-size:5.4vh;line-height:.9;margin-top:.6vh}
#cos-menu #leave .t em{font-style:inherit;color:var(--yellow)}
#cos-menu #leave .x{font-size:2.3vh;color:#b9c7e8;line-height:1.45;margin-top:2vh}
#cos-menu #leave ul{list-style:none;margin-top:1.4vh;display:flex;flex-direction:column;gap:.8vh}
#cos-menu #leave li{display:flex;align-items:center;gap:1.2vh;font-size:2.2vh;color:#b9c7e8}
#cos-menu #leave li::before{content:'';width:.5vh;height:2vh;background:var(--red);transform:skewX(-14deg);flex:none}
#cos-menu #leave li.ok::before{background:var(--green)}
/* chairman: opvolger kiezen */
#cos-menu #leave .succ{margin-top:2vh}
#cos-menu #leave .succ label{font-family:'BC';font-weight:600;font-size:1.8vh;letter-spacing:.26em;color:var(--muted)}
#cos-menu #leave .opts{display:flex;gap:1vh;margin-top:.8vh;flex-wrap:wrap}
#cos-menu #leave .opt{display:flex;align-items:center;gap:1.2vh;height:6.4vh;padding:0 1.8vh 0 1vh;background:rgba(255,255,255,.05);border:1px solid var(--line);cursor:pointer;
  clip-path:polygon(.9vh 0,100% 0,calc(100% - .9vh) 100%,0 100%);font-family:'BC';font-weight:700;font-style:italic;font-size:2.5vh}
#cos-menu #leave .opt i{width:4.4vh;height:4.4vh;display:grid;place-items:center;font-style:italic;font-weight:900;font-size:2vh;clip-path:polygon(.5vh 0,100% 0,calc(100% - .5vh) 100%,0 100%);background:linear-gradient(135deg,color-mix(in srgb,var(--c) 70%,#fff),color-mix(in srgb,var(--c) 70%,#000))}
#cos-menu #leave .opt small{font-family:'BC';font-weight:600;font-style:normal;font-size:1.5vh;letter-spacing:.18em;color:var(--yellow);margin-left:.4vh}
#cos-menu #leave .opt.on{border:2px solid var(--yellow);background:rgba(255,210,63,.1)}
/* typ-bevestiging bij opheffen */
#cos-menu #leave .confirm{margin-top:2vh;display:flex;flex-direction:column;gap:.8vh}
#cos-menu #leave .confirm label{font-family:'BC';font-weight:600;font-size:1.8vh;letter-spacing:.26em;color:var(--muted)}
#cos-menu #leave .confirm label b{color:var(--text);letter-spacing:.1em}
#cos-menu #leave .confirm .in{height:6.2vh;display:flex;align-items:center;padding:0 2vh;background:rgba(4,10,28,.65);border:1px solid var(--line);font-family:'BC';font-weight:700;font-style:italic;font-size:2.8vh;color:var(--text);letter-spacing:.2em;text-transform:uppercase;outline:none;width:100%;clip-path:polygon(1vh 0,100% 0,calc(100% - 1vh) 100%,0 100%)}
#cos-menu #leave .confirm .in::placeholder{color:#5d6f99}
#cos-menu #leave .confirm .in:focus{border-color:var(--red)}
/* knoppen */
#cos-menu #leave .acts{display:flex;justify-content:flex-end;gap:1.2vh;margin-top:2.8vh}
#cos-menu #leave .b{height:6.8vh;padding:0 3vh;display:flex;align-items:center;font-family:'BC';font-weight:900;font-style:italic;font-size:2.8vh;letter-spacing:.1em;cursor:pointer;clip-path:polygon(1vh 0,100% 0,calc(100% - 1vh) 100%,0 100%)}
#cos-menu #leave .b.cancel{background:rgba(255,255,255,.08);border:1px solid var(--line);color:var(--text)}
#cos-menu #leave .b.go{background:var(--red);color:#fff;box-shadow:0 0 2vh rgba(255,59,71,.45)}
#cos-menu #leave .b.go.off{opacity:.35;pointer-events:none}

/* COS-FIX (user-verzoek): versienummer precies op de middenlijn van het veld. In de
   space-between-voetbalk schoof het naar rechts (ONLINE-knop is breder dan CHAT);
   nu los gecentreerd. text-indent compenseert de letter-spacing na het laatste teken. */
#cos-menu .foot .ver,#cos-menu .scr:not(#lobby) .foot .ver{position:absolute;left:0;right:0;margin:0 auto;width:fit-content;text-indent:.24em}

/* Clash of Soccer – Log out. Toevoegen aan de menu-CSS (gescoped onder #cos-menu). */
/* knop rechtsboven op het Career-scherm (alleen eigen profiel), links van PLAYING SINCE */
#cos-menu .cos-logout{height:9vh;display:flex;align-items:center;gap:1.2vh;padding:0 2.4vh;border-radius:1.6vh;cursor:pointer;
  font-family:'BC';font-weight:700;font-style:italic;font-size:2.6vh;letter-spacing:.1em;color:#ff8a92;
  background:linear-gradient(180deg,rgba(60,14,28,.55),rgba(30,8,18,.55));border:1px solid rgba(255,59,71,.45);box-shadow:0 1.4vh 3vh rgba(0,0,0,.35);
  transition:transform .12s ease,filter .12s ease}
#cos-menu .cos-logout svg{width:2.6vh;height:2.6vh;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
#cos-menu .cos-logout.is-pressed,#cos-menu .cos-logout:active{transform:scale(.965) translateY(.35vh);filter:brightness(.9)}

/* bevestigingsvenster */
#cos-menu #logout{position:absolute;inset:0;z-index:20;display:none;align-items:center;justify-content:center}
#cos-menu #logout.on{display:flex}
#cos-menu #logout .dim{position:absolute;inset:0;background:rgba(2,6,18,.7);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:cos-fade .2s ease both}
#cos-menu #logout .win{position:relative;width:52vw;padding:3.2vh 3.6vh 3.4vh;
  clip-path:polygon(2.4vh 0,100% 0,calc(100% - 2.4vh) 100%,0 100%);background:linear-gradient(180deg,rgba(14,30,72,.97),rgba(8,18,46,.96));box-shadow:0 2vh 6vh rgba(0,0,0,.6);animation:cos-up .26s cubic-bezier(.2,.8,.2,1) both}
#cos-menu #logout .win::after{content:'';position:absolute;left:0;right:0;bottom:0;height:.9vh;background:var(--red);box-shadow:0 0 2vh rgba(255,59,71,.6)}
#cos-menu #logout .top{display:flex;align-items:center;gap:2.4vh}
#cos-menu #logout .av{width:11vh;height:11vh;flex:none;position:relative;overflow:hidden;
  clip-path:polygon(1.2vh 0,100% 0,calc(100% - 1.2vh) 100%,0 100%);background:linear-gradient(160deg,#2f6bff,#14307a)}
#cos-menu #logout .av img{position:absolute;left:50%;bottom:-4%;height:100%;width:auto;max-width:none;transform:translateX(-50%);image-rendering:pixelated;filter:drop-shadow(0 .6vh .6vh rgba(0,0,0,.4))}
#cos-menu #logout .k{font-family:'BC';font-weight:600;font-size:1.9vh;letter-spacing:.3em;color:#ff8a92}
#cos-menu #logout .t{font-family:'BC';font-weight:900;font-style:italic;font-size:5.4vh;line-height:.9;margin-top:.6vh}
#cos-menu #logout .t em{font-style:inherit;color:var(--yellow)}
#cos-menu #logout .x{font-size:2.3vh;color:#b9c7e8;line-height:1.45;margin-top:2.2vh}
#cos-menu #logout ul{list-style:none;margin-top:1.4vh;display:flex;flex-direction:column;gap:.8vh}
#cos-menu #logout li{display:flex;align-items:center;gap:1.2vh;font-size:2.2vh;color:#b9c7e8}
#cos-menu #logout li::before{content:'';width:.5vh;height:2vh;background:var(--green);transform:skewX(-14deg);flex:none}
#cos-menu #logout .acts{display:flex;justify-content:flex-end;gap:1.2vh;margin-top:2.8vh}
#cos-menu #logout .b{height:6.8vh;padding:0 3vh;display:flex;align-items:center;gap:1.2vh;font-family:'BC';font-weight:900;font-style:italic;font-size:2.8vh;letter-spacing:.1em;cursor:pointer;clip-path:polygon(1vh 0,100% 0,calc(100% - 1vh) 100%,0 100%)}
#cos-menu #logout .b.cancel{background:rgba(255,255,255,.08);border:1px solid var(--line);color:var(--text)}
#cos-menu #logout .b.go{background:var(--red);color:#fff;box-shadow:0 0 2vh rgba(255,59,71,.45)}
#cos-menu #logout .b.go svg{width:2.6vh;height:2.6vh;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
/* bezig-status na klikken */
#cos-menu #logout .b.go.busy{pointer-events:none;opacity:.85}
#cos-menu #logout .b.go.busy svg{display:none}
#cos-menu #logout .b.go.busy::before{content:'';width:2.2vh;height:2.2vh;border-radius:50%;border:.4vh solid rgba(255,255,255,.35);border-top-color:#fff;animation:cos-lo-spin .7s linear infinite}
#cos-menu #logout .b.cancel.off{opacity:.35;pointer-events:none}
@keyframes cos-lo-spin{to{transform:rotate(360deg)}}

/* Clash of Soccer – Profiel van een andere speler bekijken. Toevoegen aan de menu-CSS (gescoped onder #cos-menu). */
/* actiebalk in de spelerkaart, tussen sprite/naam en de totalen. Op het eigen profiel verborgen. */
#cos-menu #career .pacts{display:none;grid-template-columns:1.5fr 1fr 1fr;gap:1vh;margin-top:1.2vh}
#cos-menu #career.is-other .pacts{display:grid}
#cos-menu #career.is-other .pacts.no-invite{grid-template-columns:1fr 1fr}
#cos-menu #career .pa{position:relative;height:7vh;display:flex;align-items:center;justify-content:center;gap:1vh;padding:0 1.2vh;cursor:pointer;white-space:nowrap;
  font-family:'BC';font-weight:900;font-style:italic;font-size:2.3vh;letter-spacing:.08em;color:var(--text);
  background:rgba(255,255,255,.07);border:1px solid var(--line);clip-path:polygon(1vh 0,100% 0,calc(100% - 1vh) 100%,0 100%);
  transition:transform .12s ease,filter .12s ease,background .2s ease}
#cos-menu #career .pa svg{width:2.6vh;height:2.6vh;flex:none;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
#cos-menu #career .pa.is-pressed,#cos-menu #career .pa:active{transform:scale(.96) translateY(.3vh);filter:brightness(.9)}
/* invite: geel = primaire actie */
#cos-menu #career .pa.inv{background:var(--yellow);color:#07112b;border:0;box-shadow:0 0 2vh rgba(255,210,63,.35)}
#cos-menu #career .pa.inv small{display:block;font-size:1.5vh;font-weight:700;letter-spacing:.16em;opacity:.7;line-height:1}
#cos-menu #career .pa .tx{display:flex;flex-direction:column;align-items:flex-start;line-height:1}
/* states */
#cos-menu #career .pa.sent{background:rgba(255,210,63,.1);border:1px solid rgba(255,210,63,.55);color:var(--yellow);box-shadow:none;pointer-events:none}
#cos-menu #career .pa.done{background:rgba(63,209,106,.12);border:1px solid rgba(63,209,106,.55);color:var(--green);box-shadow:none;pointer-events:none}
#cos-menu #career .pa.off{background:rgba(255,255,255,.04);color:var(--muted);box-shadow:none;pointer-events:none;border:1px solid var(--line)}
#cos-menu #career .pa.accept{background:var(--green);color:#07112b;border:0}
#cos-menu #career .pa.busy{pointer-events:none;opacity:.7}
/* online-status naast de naam (optioneel) */
#cos-menu #career .pstat{display:none;align-items:center;gap:.8vh;font-family:'BC';font-weight:600;font-size:1.8vh;letter-spacing:.22em;color:var(--muted);margin-top:1vh}
#cos-menu #career.is-other .pstat{display:flex}
#cos-menu #career .pstat i{width:1.2vh;height:1.2vh;border-radius:50%;background:#5d6f99}
#cos-menu #career .pstat.on{color:var(--green)}
#cos-menu #career .pstat.on i{background:var(--green);box-shadow:0 0 1vh var(--green)}
/* klikbare namen elders in het menu (chat, online, friends, squad) */
#cos-menu [data-profile]{cursor:pointer}
#cos-menu [data-profile]:hover{text-decoration:underline;text-decoration-thickness:.2vh;text-underline-offset:.4vh}
/* toast */
#cos-menu .cos-ptoast{position:absolute;left:0;right:0;margin:auto;width:max-content;top:12vh;z-index:30;display:flex;align-items:center;gap:1.2vh;padding:1.4vh 2.6vh;
  font-family:'BC';font-weight:900;font-style:italic;font-size:2.6vh;letter-spacing:.08em;color:#07112b;background:var(--yellow);
  clip-path:polygon(1vh 0,100% 0,calc(100% - 1vh) 100%,0 100%);box-shadow:0 1.4vh 3vh rgba(0,0,0,.45);animation:cos-pt 2.4s ease both;pointer-events:none}
#cos-menu .cos-ptoast.err{background:var(--red);color:#fff}
#cos-menu .cos-ptoast svg{width:2.6vh;height:2.6vh;stroke:currentColor;fill:none;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
@keyframes cos-pt{0%{opacity:0;transform:translateY(-1.5vh)}10%,85%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-1vh)}}

/* COS-FIX (profiel, pakket 8): hele squad-kaart/-rij is klikbaar - daar geen onderstreping bij hover */
#cos-menu #team .pc[data-profile]:hover,#cos-menu #team .lrow[data-profile]:hover{text-decoration:none}
#cos-menu .avw[data-profile]:hover,#cos-menu .pavw[data-profile]:hover,#cos-menu .mav[data-profile]:hover{text-decoration:none} /* COS-FIX (profiel): avatars klikbaar, geen onderstreping */

/* Clash of Soccer – donkergroene gloed op het achtergrondveld. Toevoegen achteraan de menu-CSS.
   De laag .turf ligt ONDER .pitch (lijnen blijven erboven) en wordt door veld-groen.js automatisch
   vóór elke .pitch gezet, dus werkt op elk scherm. Groen is het sterkst in het midden en fade't in
   vanaf de zijkanten. Sterkte: --cos-turf (0 – 1). */
#cos-menu{--cos-turf:.35}
#cos-menu .turf{position:absolute;left:0;right:0;bottom:0;height:26vh;pointer-events:none;opacity:var(--cos-turf);
  background:
    /* kern rond de middenlijn */
    radial-gradient(ellipse 26% 95% at 50% 100%, rgba(30,150,75,.62) 0%, rgba(18,105,52,.42) 45%, rgba(10,70,36,.18) 75%, transparent 100%),
    /* brede donkergroene basis */
    radial-gradient(ellipse 48% 100% at 50% 100%, rgba(12,80,40,.45), transparent 100%);
  /* zijkanten in, bovenkant zacht uit */
  -webkit-mask:linear-gradient(90deg,transparent 4%,#000 32%,#000 68%,transparent 96%),linear-gradient(to top,#000 35%,transparent 100%);
  -webkit-mask-composite:source-in;
          mask:linear-gradient(90deg,transparent 4%,#000 32%,#000 68%,transparent 96%),linear-gradient(to top,#000 35%,transparent 100%);
          mask-composite:intersect;
  animation:cos-turf-in 1.4s ease-out both}


@keyframes cos-turf-in{from{opacity:0}to{opacity:var(--cos-turf)}}

/* Clash of Soccer – Team-invite meldingen. Toevoegen achteraan de menu-CSS (gescoped onder #cos-menu). */

/* 1) label op lobby-panelen (CAREER altijd, TEAM alleen zonder team) */
#cos-menu .cos-invtag{position:absolute;top:2.2vh;right:3.2vh;z-index:2;display:none;align-items:center;gap:.8vh;height:3.8vh;padding:0 1.3vh 0 1vh;
  font-family:'BC';font-weight:900;font-style:italic;font-size:2vh;letter-spacing:.1em;color:#fff;background:var(--red);
  clip-path:polygon(.7vh 0,100% 0,calc(100% - .7vh) 100%,0 100%);box-shadow:0 0 2vh rgba(255,59,71,.55);pointer-events:none}
#cos-menu .cos-invtag.on{display:flex;animation:cos-inv-pop .45s cubic-bezier(.2,1.4,.4,1) both}
#cos-menu .cos-invtag svg{width:2.2vh;height:2.2vh;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
#cos-menu .pan.has-inv{box-shadow:inset 0 0 0 1px rgba(255,59,71,.35)}

/* 2) teller op de profielnaam linksboven */
#cos-menu .lob .profile{position:relative}
#cos-menu .cos-invdot{position:absolute;left:6.4vh;top:.6vh;z-index:2;min-width:3.4vh;height:3.4vh;padding:0 .8vh;border-radius:99px;display:none;place-items:center;
  font-family:'BC';font-weight:900;font-size:2.1vh;color:#fff;background:var(--red);border:.3vh solid #0b1638;box-shadow:0 0 1.6vh rgba(255,59,71,.6)}
#cos-menu .cos-invdot.on{display:grid;animation:cos-inv-pop .45s cubic-bezier(.2,1.4,.4,1) both}
#cos-menu .cos-invdot.on::after{content:'';position:absolute;inset:-.3vh;border-radius:99px;border:.3vh solid var(--red);animation:cos-inv-ring 1.8s ease-out infinite}

/* 3) knop op het EIGEN Career-scherm (rechtsboven, vóór LOG OUT) */
#cos-menu .cos-invbtn{height:9vh;display:none;align-items:center;gap:1.2vh;padding:0 2.2vh;border-radius:1.6vh;cursor:pointer;
  font-family:'BC';font-weight:900;font-style:italic;font-size:2.6vh;letter-spacing:.1em;color:#07112b;background:var(--yellow);
  box-shadow:0 0 2.4vh rgba(255,210,63,.35),0 1.4vh 3vh rgba(0,0,0,.35);transition:transform .12s ease,filter .12s ease}
#cos-menu .cos-invbtn.on{display:flex}
#cos-menu #career.is-other .cos-invbtn{display:none!important}
#cos-menu .cos-invbtn svg{width:2.8vh;height:2.8vh;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
#cos-menu .cos-invbtn b{min-width:3.4vh;height:3.4vh;padding:0 .8vh;border-radius:99px;display:grid;place-items:center;background:var(--red);color:#fff;font-style:normal;font-size:2.1vh}
#cos-menu .cos-invbtn.is-pressed,#cos-menu .cos-invbtn:active{transform:scale(.965) translateY(.35vh);filter:brightness(.92)}

/* 4) venster met invites */
#cos-menu #invites{position:absolute;inset:0;z-index:20;display:none;align-items:center;justify-content:center}
#cos-menu #invites.on{display:flex}
#cos-menu #invites .dim{position:absolute;inset:0;background:rgba(2,6,18,.7);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:cos-fade .2s ease both}
#cos-menu #invites .win{position:relative;width:64vw;max-height:86vh;display:flex;flex-direction:column;padding:3vh 3.4vh 3.2vh;
  clip-path:polygon(2.4vh 0,100% 0,calc(100% - 2.4vh) 100%,0 100%);background:linear-gradient(180deg,rgba(14,30,72,.97),rgba(8,18,46,.96));box-shadow:0 2vh 6vh rgba(0,0,0,.6);animation:cos-up .26s cubic-bezier(.2,.8,.2,1) both}
#cos-menu #invites .win::after{content:'';position:absolute;left:0;right:0;bottom:0;height:.9vh;background:var(--yellow);box-shadow:0 0 2vh rgba(255,210,63,.6)}
#cos-menu #invites .hd{display:flex;align-items:flex-end;justify-content:space-between;gap:2vh}
#cos-menu #invites .k{font-family:'BC';font-weight:600;font-size:1.9vh;letter-spacing:.3em;color:var(--yellow)}
#cos-menu #invites .t{font-family:'BC';font-weight:900;font-style:italic;font-size:5vh;line-height:.9;margin-top:.6vh}
#cos-menu #invites .x{font-size:2.1vh;color:#b9c7e8;margin-top:1vh}
#cos-menu #invites .close{width:6vh;height:6vh;display:grid;place-items:center;cursor:pointer;background:rgba(255,255,255,.07);border:1px solid var(--line);font-family:'BC';font-weight:900;font-size:2.8vh;clip-path:polygon(.8vh 0,100% 0,calc(100% - .8vh) 100%,0 100%)}
#cos-menu #invites .list{margin-top:2vh;display:flex;flex-direction:column;gap:1vh;overflow:auto;min-height:0}
#cos-menu #invites .row{display:flex;align-items:center;gap:1.8vh;padding:1.2vh 1.4vh;background:rgba(255,255,255,.045);border:1px solid var(--line);clip-path:polygon(1vh 0,100% 0,calc(100% - 1vh) 100%,0 100%);animation:cos-up .3s ease both}
#cos-menu #invites .cr{width:7vh;height:7vh;flex:none;display:grid;place-items:center;font-family:'BC';font-weight:900;font-style:italic;font-size:2.4vh;color:#fff;
  clip-path:polygon(.8vh 0,100% 0,calc(100% - .8vh) 100%,0 100%);background:linear-gradient(135deg,color-mix(in srgb,var(--c) 75%,#fff),color-mix(in srgb,var(--c) 70%,#000));text-shadow:0 .3vh 0 rgba(0,0,0,.35)}
#cos-menu #invites .info{flex:1;min-width:0}
#cos-menu #invites .info b{display:block;font-family:'BC';font-weight:900;font-style:italic;font-size:3vh;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cos-menu #invites .info span{display:block;font-family:'BC';font-weight:600;font-size:1.8vh;letter-spacing:.18em;color:var(--muted);margin-top:.6vh;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cos-menu #invites .info span em{font-style:normal;color:var(--text)}
#cos-menu #invites .b{height:5.8vh;padding:0 2.4vh;display:flex;align-items:center;justify-content:center;font-family:'BC';font-weight:900;font-style:italic;font-size:2.4vh;letter-spacing:.1em;cursor:pointer;flex:none;
  clip-path:polygon(.9vh 0,100% 0,calc(100% - .9vh) 100%,0 100%);transition:transform .12s ease}
#cos-menu #invites .b:active{transform:scale(.95)}
#cos-menu #invites .b.acc{background:var(--green);color:#07112b}
#cos-menu #invites .b.dec{width:5.8vh;padding:0;background:rgba(255,255,255,.08);border:1px solid var(--line);color:var(--text)}
#cos-menu #invites .b.off{opacity:.35;pointer-events:none}
#cos-menu #invites .b.busy{opacity:.6;pointer-events:none}
#cos-menu #invites .note{display:flex;align-items:center;gap:1.2vh;margin-top:1.6vh;font-size:2vh;color:#b9c7e8}
#cos-menu #invites .note::before{content:'';width:.5vh;height:2vh;background:var(--yellow);transform:skewX(-14deg);flex:none}
#cos-menu #invites .note.warn::before{background:var(--red)}
#cos-menu #invites .empty{padding:4vh 0 2vh;text-align:center;font-family:'BC';font-weight:700;font-style:italic;font-size:2.6vh;letter-spacing:.14em;color:var(--muted)}

@keyframes cos-inv-pop{0%{transform:scale(.4);opacity:0}100%{transform:none;opacity:1}}
@keyframes cos-inv-ring{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.7);opacity:0}}

/* Clash of Soccer – Team van een ander bekijken. Toevoegen achteraan de menu-CSS (gescoped onder #cos-menu). */

/* 1) Club History: rijen klikbaar */
#cos-menu #career .row[data-team]{cursor:pointer;position:relative;transition:background .15s ease}
#cos-menu #career .row[data-team]:hover,#cos-menu #career .row[data-team].is-pressed{background:rgba(255,255,255,.06)}
#cos-menu #career .row[data-team] .cn::after{content:'';display:inline-block;width:1.1vh;height:1.1vh;margin-left:1.2vh;vertical-align:.5vh;
  border-right:.35vh solid currentColor;border-top:.35vh solid currentColor;transform:rotate(45deg);opacity:.45}
#cos-menu #career .row.gone .crest{filter:grayscale(1) brightness(.7)}
#cos-menu #career .row.gone .cn{color:var(--muted)}

/* 2) Team-scherm als bezoeker */
#cos-menu #team.is-visitor #leaveBtn{display:none!important}
#cos-menu #team.is-visitor .pan .more .go{display:none}
#cos-menu #team.is-visitor .pan{cursor:default}
#cos-menu #team.is-visitor .pc[data-profile]{cursor:pointer}
#cos-menu #team.is-visitor .pc.empty{outline-style:solid;outline-color:rgba(255,255,255,.07)}
#cos-menu #team.is-visitor .pc.empty .plus{display:none}
#cos-menu #team.is-visitor .pc.empty .nm{color:#5d6f99}
/* label "VISITING" naast de teamnaam */
#cos-menu .cos-visit{display:none;align-items:center;gap:.8vh;height:3.4vh;padding:0 1.2vh;margin-left:1.6vh;vertical-align:middle;
  font-family:'BC';font-weight:700;font-style:normal;font-size:1.7vh;letter-spacing:.22em;color:#b9c7e8;background:rgba(255,255,255,.07);border:1px solid var(--line);
  clip-path:polygon(.6vh 0,100% 0,calc(100% - .6vh) 100%,0 100%)}
#cos-menu #team.is-visitor .cos-visit{display:inline-flex}

/* 3) JOIN-knop rechtsboven (vóór TEAM RATING) */
#cos-menu .cos-join{height:9vh;display:none;align-items:center;gap:1.2vh;padding:0 2.4vh;border-radius:1.6vh;cursor:pointer;white-space:nowrap;
  font-family:'BC';font-weight:900;font-style:italic;font-size:2.6vh;letter-spacing:.1em;transition:transform .12s ease,filter .12s ease}
#cos-menu #team.is-visitor .cos-join{display:flex}
#cos-menu .cos-join svg{width:2.6vh;height:2.6vh;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
#cos-menu .cos-join.is-pressed,#cos-menu .cos-join:active{transform:scale(.965) translateY(.35vh);filter:brightness(.92)}
#cos-menu .cos-join.open{background:var(--green);color:#07112b;box-shadow:0 0 2.4vh rgba(63,209,106,.35),0 1.4vh 3vh rgba(0,0,0,.35)}
#cos-menu .cos-join.request{background:var(--yellow);color:#07112b;box-shadow:0 0 2.4vh rgba(255,210,63,.35),0 1.4vh 3vh rgba(0,0,0,.35)}
#cos-menu .cos-join.sent{background:rgba(255,210,63,.1);border:1px solid rgba(255,210,63,.55);color:var(--yellow);pointer-events:none}
#cos-menu .cos-join.locked{background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--muted);pointer-events:none}
#cos-menu .cos-join.busy{opacity:.7;pointer-events:none}

/* 4) bevestiging als je al in een team zit */
#cos-menu #tjoin{position:absolute;inset:0;z-index:20;display:none;align-items:center;justify-content:center}
#cos-menu #tjoin.on{display:flex}
#cos-menu #tjoin .dim{position:absolute;inset:0;background:rgba(2,6,18,.7);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:cos-fade .2s ease both}
#cos-menu #tjoin .win{position:relative;width:54vw;padding:3.2vh 3.6vh 3.4vh;clip-path:polygon(2.4vh 0,100% 0,calc(100% - 2.4vh) 100%,0 100%);
  background:linear-gradient(180deg,rgba(14,30,72,.97),rgba(8,18,46,.96));box-shadow:0 2vh 6vh rgba(0,0,0,.6);animation:cos-up .26s cubic-bezier(.2,.8,.2,1) both}
#cos-menu #tjoin .win::after{content:'';position:absolute;left:0;right:0;bottom:0;height:.9vh;background:var(--acc,var(--green));box-shadow:0 0 2vh var(--acc,var(--green))}
#cos-menu #tjoin .top{display:flex;align-items:center;gap:2.4vh}
#cos-menu #tjoin .cr{width:10vh;height:10vh;flex:none;display:grid;place-items:center;font-family:'BC';font-weight:900;font-style:italic;font-size:3.2vh;color:#fff;
  clip-path:polygon(1vh 0,100% 0,calc(100% - 1vh) 100%,0 100%);background:linear-gradient(135deg,color-mix(in srgb,var(--c) 75%,#fff),color-mix(in srgb,var(--c) 70%,#000));text-shadow:0 .3vh 0 rgba(0,0,0,.35)}
#cos-menu #tjoin .k{font-family:'BC';font-weight:600;font-size:1.9vh;letter-spacing:.3em;color:var(--acc,var(--green))}
#cos-menu #tjoin .t{font-family:'BC';font-weight:900;font-style:italic;font-size:5vh;line-height:.9;margin-top:.6vh}
#cos-menu #tjoin .t em{font-style:inherit;color:var(--yellow)}
#cos-menu #tjoin ul{list-style:none;margin-top:2.2vh;display:flex;flex-direction:column;gap:.8vh}
#cos-menu #tjoin li{display:flex;align-items:center;gap:1.2vh;font-size:2.2vh;color:#b9c7e8}
#cos-menu #tjoin li::before{content:'';width:.5vh;height:2vh;background:var(--yellow);transform:skewX(-14deg);flex:none}
#cos-menu #tjoin li.warn::before{background:var(--red)}
#cos-menu #tjoin .acts{display:flex;justify-content:flex-end;gap:1.2vh;margin-top:2.8vh}
#cos-menu #tjoin .b{height:6.8vh;padding:0 3vh;display:flex;align-items:center;font-family:'BC';font-weight:900;font-style:italic;font-size:2.8vh;letter-spacing:.1em;cursor:pointer;clip-path:polygon(1vh 0,100% 0,calc(100% - 1vh) 100%,0 100%)}
#cos-menu #tjoin .b.cancel{background:rgba(255,255,255,.08);border:1px solid var(--line);color:var(--text)}
#cos-menu #tjoin .b.go{background:var(--acc,var(--green));color:#07112b}
#cos-menu #tjoin .b.off{opacity:.35;pointer-events:none}

/* Clash of Soccer – Recruitment (join-requests + verstuurde invites). VERVANGT requests.css uit pakket 12. */

/* 1) label op de TEAM-knop in de lobby */
#cos-menu .cos-reqtag{position:absolute;top:2.2vh;right:3.2vh;z-index:2;display:none;align-items:center;gap:.8vh;height:3.8vh;padding:0 1.3vh 0 1vh;
  font-family:'BC';font-weight:900;font-style:italic;font-size:2vh;letter-spacing:.1em;color:#fff;background:var(--red);
  clip-path:polygon(.7vh 0,100% 0,calc(100% - .7vh) 100%,0 100%);box-shadow:0 0 2vh rgba(255,59,71,.55);pointer-events:none}
#cos-menu .cos-reqtag.on{display:flex;animation:cos-req-pop .45s cubic-bezier(.2,1.4,.4,1) both}
#cos-menu .cos-reqtag svg{width:2.2vh;height:2.2vh;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}

/* 2) knop REQUESTS op het eigen Team-scherm (vóór LEAVE TEAM) */
#cos-menu .cos-reqbtn{height:9vh;display:none;align-items:center;gap:1.2vh;padding:0 2.2vh;border-radius:1.6vh;cursor:pointer;
  font-family:'BC';font-weight:900;font-style:italic;font-size:2.6vh;letter-spacing:.1em;color:#07112b;background:var(--yellow);
  box-shadow:0 0 2.4vh rgba(255,210,63,.35),0 1.4vh 3vh rgba(0,0,0,.35);transition:transform .12s ease,filter .12s ease}
#cos-menu .cos-reqbtn.on{display:flex}
#cos-menu #team.is-visitor .cos-reqbtn{display:none!important}
#cos-menu .cos-reqbtn svg{width:2.8vh;height:2.8vh;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
#cos-menu .cos-reqbtn b:empty{display:none}
#cos-menu .cos-reqbtn.quiet{background:rgba(255,255,255,.08);color:var(--text);border:1px solid var(--line);box-shadow:0 1.4vh 3vh rgba(0,0,0,.35)}
#cos-menu .cos-reqbtn b{min-width:3.4vh;height:3.4vh;padding:0 .8vh;border-radius:99px;display:grid;place-items:center;background:var(--red);color:#fff;font-style:normal;font-size:2.1vh}
#cos-menu .cos-reqbtn.is-pressed,#cos-menu .cos-reqbtn:active{transform:scale(.965) translateY(.35vh);filter:brightness(.92)}

/* 3) venster */
#cos-menu #jreq{position:absolute;inset:0;z-index:20;display:none;align-items:center;justify-content:center}
#cos-menu #jreq.on{display:flex}
#cos-menu #jreq .dim{position:absolute;inset:0;background:rgba(2,6,18,.7);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:cos-fade .2s ease both}
#cos-menu #jreq .win{position:relative;width:64vw;max-height:86vh;display:flex;flex-direction:column;padding:3vh 3.4vh 3.2vh;
  clip-path:polygon(2.4vh 0,100% 0,calc(100% - 2.4vh) 100%,0 100%);background:linear-gradient(180deg,rgba(14,30,72,.97),rgba(8,18,46,.96));box-shadow:0 2vh 6vh rgba(0,0,0,.6);animation:cos-up .26s cubic-bezier(.2,.8,.2,1) both}
#cos-menu #jreq .win::after{content:'';position:absolute;left:0;right:0;bottom:0;height:.9vh;background:var(--yellow);box-shadow:0 0 2vh rgba(255,210,63,.6)}
#cos-menu #jreq .hd{display:flex;align-items:flex-end;justify-content:space-between;gap:2vh}
#cos-menu #jreq .k{font-family:'BC';font-weight:600;font-size:1.9vh;letter-spacing:.3em;color:var(--yellow)}
#cos-menu #jreq .t{font-family:'BC';font-weight:900;font-style:italic;font-size:5vh;line-height:.9;margin-top:.6vh}
#cos-menu #jreq .t em{font-style:inherit;color:var(--yellow)}
#cos-menu #jreq .x{font-size:2.1vh;color:#b9c7e8;margin-top:1vh}
#cos-menu #jreq .cap{display:flex;align-items:center;gap:1vh;font-family:'BC';font-weight:600;font-size:1.8vh;letter-spacing:.22em;color:var(--muted)}
#cos-menu #jreq .cap b{font-family:'BC';font-weight:900;font-style:italic;font-size:3vh;letter-spacing:0;color:var(--text)}
#cos-menu #jreq .cap b.full{color:var(--red)}
#cos-menu #jreq .close{width:6vh;height:6vh;display:grid;place-items:center;cursor:pointer;margin-left:2vh;background:rgba(255,255,255,.07);border:1px solid var(--line);font-family:'BC';font-weight:900;font-size:2.8vh;clip-path:polygon(.8vh 0,100% 0,calc(100% - .8vh) 100%,0 100%)}
#cos-menu #jreq .list{margin-top:2vh;display:flex;flex-direction:column;gap:1vh;overflow:auto;min-height:0}
#cos-menu #jreq .row{display:flex;align-items:center;gap:1.8vh;padding:1.2vh 1.4vh;background:rgba(255,255,255,.045);border:1px solid var(--line);clip-path:polygon(1vh 0,100% 0,calc(100% - 1vh) 100%,0 100%);animation:cos-up .3s ease both}
#cos-menu #jreq .av{width:7vh;height:7vh;flex:none;position:relative;overflow:hidden;clip-path:polygon(.8vh 0,100% 0,calc(100% - .8vh) 100%,0 100%);
  background:linear-gradient(160deg,color-mix(in srgb,var(--c) 80%,#fff),color-mix(in srgb,var(--c) 60%,#000))}
#cos-menu #jreq .av img{position:absolute;left:50%;top:2%;height:128%;transform:translateX(-50%);image-rendering:pixelated}
#cos-menu #jreq .av i{position:absolute;inset:0;display:grid;place-items:center;font-family:'BC';font-weight:900;font-style:italic;font-size:3vh;color:#fff}
#cos-menu #jreq .rt{width:6.4vh;flex:none;text-align:center;line-height:.9}
#cos-menu #jreq .rt b{display:block;font-family:'BC';font-weight:900;font-style:italic;font-size:3.6vh;color:var(--yellow)}
#cos-menu #jreq .rt span{font-family:'BC';font-weight:700;font-size:1.7vh;letter-spacing:.16em;color:var(--muted)}
#cos-menu #jreq .info{flex:1;min-width:0}
#cos-menu #jreq .info b{display:inline-block;max-width:100%;font-family:'BC';font-weight:900;font-style:italic;font-size:3vh;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cos-menu #jreq .info span{display:block;font-family:'BC';font-weight:600;font-size:1.8vh;letter-spacing:.18em;color:var(--muted);margin-top:.6vh;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cos-menu #jreq .info span em{font-style:normal;color:var(--text)}
#cos-menu #jreq .info span .on{color:var(--green)}
#cos-menu #jreq .b{height:5.8vh;padding:0 2.4vh;display:flex;align-items:center;justify-content:center;font-family:'BC';font-weight:900;font-style:italic;font-size:2.4vh;letter-spacing:.1em;cursor:pointer;flex:none;
  clip-path:polygon(.9vh 0,100% 0,calc(100% - .9vh) 100%,0 100%);transition:transform .12s ease}
#cos-menu #jreq .b:active{transform:scale(.95)}
#cos-menu #jreq .b.acc{background:var(--green);color:#07112b}
#cos-menu #jreq .b.dec{width:5.8vh;padding:0;background:rgba(255,255,255,.08);border:1px solid var(--line);color:var(--text)}
#cos-menu #jreq .b.off{opacity:.35;pointer-events:none}
#cos-menu #jreq .b.busy{opacity:.6;pointer-events:none}
#cos-menu #jreq .note{display:flex;align-items:center;gap:1.2vh;margin-top:1.6vh;font-size:2vh;color:#b9c7e8}
#cos-menu #jreq .note::before{content:'';width:.5vh;height:2vh;background:var(--red);transform:skewX(-14deg);flex:none}
#cos-menu #jreq .empty{padding:4vh 0 2vh;text-align:center;font-family:'BC';font-weight:700;font-style:italic;font-size:2.6vh;letter-spacing:.14em;color:var(--muted)}
/* toast */
#cos-menu .cos-rtoast{position:absolute;left:0;right:0;margin:auto;width:max-content;top:12vh;z-index:30;display:flex;align-items:center;gap:1.2vh;padding:1.4vh 2.6vh;
  font-family:'BC';font-weight:900;font-style:italic;font-size:2.6vh;letter-spacing:.08em;color:#07112b;background:var(--green);
  clip-path:polygon(1vh 0,100% 0,calc(100% - 1vh) 100%,0 100%);box-shadow:0 1.4vh 3vh rgba(0,0,0,.45);animation:cos-rt 2.4s ease both;pointer-events:none}
#cos-menu .cos-rtoast svg{width:2.6vh;height:2.6vh;stroke:currentColor;fill:none;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
@keyframes cos-rt{0%{opacity:0;transform:translateY(-1.5vh)}10%,85%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-1vh)}}
@keyframes cos-req-pop{0%{transform:scale(.4);opacity:0}100%{transform:none;opacity:1}}

/* tabs */
#cos-menu #jreq .tabs{display:flex;gap:1vh;margin-top:2vh}
#cos-menu #jreq .tab{height:5.6vh;display:flex;align-items:center;gap:1vh;padding:0 2.2vh;cursor:pointer;font-family:'BC';font-weight:900;font-style:italic;font-size:2.4vh;letter-spacing:.1em;color:var(--muted);
  background:rgba(255,255,255,.04);border:1px solid var(--line);clip-path:polygon(.9vh 0,100% 0,calc(100% - .9vh) 100%,0 100%)}
#cos-menu #jreq .tab.on{color:#07112b;background:var(--yellow);border-color:transparent}
#cos-menu #jreq .tab b{min-width:3vh;height:3vh;padding:0 .7vh;border-radius:99px;display:grid;place-items:center;font-style:normal;font-size:1.9vh;background:rgba(255,255,255,.14);color:var(--text)}
#cos-menu #jreq .tab b.red{background:var(--red);color:#fff}
#cos-menu #jreq .tab.on b{background:rgba(7,17,43,.18);color:#07112b}
#cos-menu #jreq .tab.on b.red{background:var(--red);color:#fff}
#cos-menu #jreq .tab b:empty{display:none}
#cos-menu #jreq .list{margin-top:1.4vh}
/* verstuurde invites */
#cos-menu #jreq .pend{height:4.2vh;display:flex;align-items:center;gap:.8vh;padding:0 1.4vh;flex:none;font-family:'BC';font-weight:700;font-style:italic;font-size:1.9vh;letter-spacing:.14em;
  color:var(--yellow);background:rgba(255,210,63,.1);border:1px solid rgba(255,210,63,.45);clip-path:polygon(.7vh 0,100% 0,calc(100% - .7vh) 100%,0 100%)}
#cos-menu #jreq .pend svg{width:2vh;height:2vh;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round}
#cos-menu #jreq .b.cxl{background:transparent;border:1px solid rgba(255,59,71,.55);color:#ff8a92}
#cos-menu #jreq .cap small{margin-left:.6vh;color:var(--yellow);letter-spacing:.18em}

/* Clash of Soccer – Chairman-embleem (stropdas) in hetzelfde gele vakje als de captain-C.
   Toevoegen achteraan de menu-CSS. Gebruikt het bestaande .cc-vakje; alleen de inhoud verschilt. */
#cos-menu .cc.chair{font-size:0}
#cos-menu .cc.chair svg{width:92%;height:92%;display:block}

/* Clash of Soccer – Positie kiezen in Career. Toevoegen achteraan de menu-CSS (gescoped onder #cos-menu). */

/* gele positie-tag: klikbaar op het EIGEN profiel */
#cos-menu #career:not(.is-other) .tag.pos{cursor:pointer;transition:transform .12s ease,filter .12s ease}
#cos-menu #career:not(.is-other) .tag.pos:active,#cos-menu #career:not(.is-other) .tag.pos.is-pressed{transform:scale(.95)}
#cos-menu #career:not(.is-other) .tag.pos::after{content:'';width:1.9vh;height:1.9vh;margin-left:.2vh;flex:none;opacity:.7;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2307112b' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16z'/%3E%3C/svg%3E")}
/* nog geen positie gekozen */
#cos-menu #career .tag.pos.unset{background:transparent;color:var(--yellow);border:1px dashed rgba(255,210,63,.7)}
#cos-menu #career:not(.is-other) .tag.pos.unset{animation:cos-pos-pulse 1.8s ease-in-out infinite}
#cos-menu #career:not(.is-other) .tag.pos.unset::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffd23f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16z'/%3E%3C/svg%3E")}
#cos-menu #career.is-other .tag.pos.unset{display:none}
@keyframes cos-pos-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,210,63,0)}50%{box-shadow:0 0 1.6vh .2vh rgba(255,210,63,.35)}}

/* kiesvenster (compact) */
#cos-menu #posPick{position:absolute;inset:0;z-index:20;display:none;align-items:center;justify-content:center}
#cos-menu #posPick.on{display:flex}
#cos-menu #posPick .dim{position:absolute;inset:0;background:rgba(2,6,18,.7);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:cos-fade .2s ease both}
#cos-menu #posPick .win{position:relative;width:56vw;padding:3vh 3.4vh 3.2vh;
  clip-path:polygon(2.4vh 0,100% 0,calc(100% - 2.4vh) 100%,0 100%);background:linear-gradient(180deg,rgba(14,30,72,.97),rgba(8,18,46,.96));box-shadow:0 2vh 6vh rgba(0,0,0,.6);animation:cos-up .26s cubic-bezier(.2,.8,.2,1) both}
#cos-menu #posPick .win::after{content:'';position:absolute;left:0;right:0;bottom:0;height:.9vh;background:var(--yellow);box-shadow:0 0 2vh rgba(255,210,63,.6)}
#cos-menu #posPick .k{font-family:'BC';font-weight:600;font-size:1.9vh;letter-spacing:.3em;color:var(--yellow)}
#cos-menu #posPick .t{font-family:'BC';font-weight:900;font-style:italic;font-size:4.6vh;line-height:.9;margin-top:.6vh}
#cos-menu #posPick .t em{font-style:inherit;color:var(--yellow)}
#cos-menu #posPick .opts{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4vh;margin-top:2.2vh}
#cos-menu #posPick .o{padding:1.4vh 1.4vh 1.6vh;cursor:pointer;background:rgba(255,255,255,.05);border:1px solid var(--line);
  clip-path:polygon(1vh 0,100% 0,calc(100% - 1vh) 100%,0 100%);transition:transform .12s ease,background .15s ease}
#cos-menu #posPick .o:active{transform:scale(.96)}
#cos-menu #posPick .o.on{background:rgba(255,210,63,.12);border:2px solid var(--yellow);box-shadow:0 0 2.4vh rgba(255,210,63,.25)}
/* mini-veld met oplichtend deel */
#cos-menu #posPick .mf{position:relative;height:11vh;border-radius:.4vh;overflow:hidden;background:#1a6236;box-shadow:inset 0 0 0 .25vh rgba(255,255,255,.45)}
#cos-menu #posPick .mf::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:.25vh;background:rgba(255,255,255,.45)}
#cos-menu #posPick .mf::after{content:'';position:absolute;left:50%;top:50%;width:4.4vh;height:4.4vh;border-radius:50%;border:.25vh solid rgba(255,255,255,.45);transform:translate(-50%,-50%)}
#cos-menu #posPick .mf i{position:absolute;top:0;bottom:0;width:33.4%;background:rgba(255,210,63,.18)}
#cos-menu #posPick .o.on .mf i{background:rgba(255,210,63,.55)}
#cos-menu #posPick .mf b{position:absolute;z-index:1;top:50%;width:1.6vh;height:1.6vh;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 0 0 .3vh rgba(7,17,43,.6)}
#cos-menu #posPick .o.on .mf b{background:var(--yellow)}
#cos-menu #posPick .o .c{display:block;font-family:'BC';font-weight:900;font-style:italic;font-size:4.4vh;line-height:.9;margin-top:1.2vh}
#cos-menu #posPick .o.on .c{color:var(--yellow)}
#cos-menu #posPick .o .n{display:block;font-family:'BC';font-weight:700;font-size:1.8vh;letter-spacing:.22em;color:var(--muted);margin-top:.4vh}
#cos-menu #posPick .acts{display:flex;justify-content:flex-end;gap:1.2vh;margin-top:2.4vh}
#cos-menu #posPick .b{height:6.4vh;padding:0 3vh;display:flex;align-items:center;justify-content:center;font-family:'BC';font-weight:900;font-style:italic;font-size:2.6vh;letter-spacing:.1em;cursor:pointer;clip-path:polygon(1vh 0,100% 0,calc(100% - 1vh) 100%,0 100%)}
#cos-menu #posPick .b.cancel{background:rgba(255,255,255,.08);border:1px solid var(--line);color:var(--text)}
#cos-menu #posPick .b.go{background:var(--yellow);color:#07112b}
#cos-menu #posPick .b.off{opacity:.35;pointer-events:none}
#cos-menu #posPick .b.busy{opacity:.7;pointer-events:none}

/* Clash of Soccer – Block / Report / Remove friend op andermans profiel. Toevoegen achteraan de menu-CSS. */

/* ⋯-knop als 4e kolom in de actiebalk (pakket 8) */
#cos-menu #career.is-other .pacts{grid-template-columns:1.5fr 1fr 1fr 6.6vh}
#cos-menu #career.is-other .pacts.no-invite{grid-template-columns:1fr 1fr 6.6vh}
#cos-menu #career .pa.more{padding:0;font-size:3.4vh;letter-spacing:0;line-height:0}
#cos-menu #career .pa.more svg{width:3vh;height:3vh;fill:currentColor;stroke:none}

/* geblokkeerd: balk i.p.v. acties */
#cos-menu #career .pblock{display:none;align-items:center;gap:1.4vh;margin-top:1.2vh;height:7vh;padding:0 1vh 0 1.8vh;
  background:rgba(255,59,71,.1);border:1px solid rgba(255,59,71,.45);clip-path:polygon(1vh 0,100% 0,calc(100% - 1vh) 100%,0 100%)}
#cos-menu #career.is-other.is-blocked .pblock{display:flex}
#cos-menu #career.is-other.is-blocked .pacts{display:none}
#cos-menu #career .pblock svg{width:2.8vh;height:2.8vh;flex:none;stroke:#ff8a92;fill:none;stroke-width:2.4;stroke-linecap:round}
#cos-menu #career .pblock span{flex:1;font-family:'BC';font-weight:900;font-style:italic;font-size:2.4vh;letter-spacing:.1em;color:#ff8a92}
#cos-menu #career .pblock span small{display:block;font-family:'Barlow';font-weight:500;font-style:normal;font-size:1.7vh;letter-spacing:0;color:#b9c7e8;margin-top:.2vh}
#cos-menu #career .pblock .ub{height:5.2vh;padding:0 2vh;display:flex;align-items:center;cursor:pointer;font-family:'BC';font-weight:900;font-style:italic;font-size:2.2vh;letter-spacing:.1em;
  color:var(--text);background:rgba(255,255,255,.08);border:1px solid var(--line);clip-path:polygon(.8vh 0,100% 0,calc(100% - .8vh) 100%,0 100%)}

/* menu (popover) */
#cos-menu #sfMenu{position:absolute;z-index:21;display:none;min-width:30vh;padding:.8vh;background:linear-gradient(180deg,rgba(18,36,82,.98),rgba(10,22,54,.98));
  border:1px solid var(--line);box-shadow:0 2vh 5vh rgba(0,0,0,.6);clip-path:polygon(1vh 0,100% 0,calc(100% - 1vh) 100%,0 100%);animation:cos-up .18s ease both}
#cos-menu #sfMenu.on{display:block}
#cos-menu #sfMenu .it{display:flex;align-items:center;gap:1.4vh;height:6vh;padding:0 1.8vh;cursor:pointer;font-family:'BC';font-weight:900;font-style:italic;font-size:2.4vh;letter-spacing:.1em;color:var(--text)}
#cos-menu #sfMenu .it:hover{background:rgba(255,255,255,.06)}
#cos-menu #sfMenu .it svg{width:2.6vh;height:2.6vh;flex:none;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
#cos-menu #sfMenu .it.red{color:#ff8a92}
#cos-menu #sfMenu .sep{height:1px;margin:.6vh 1vh;background:var(--line)}
#cos-menu #sfShade{position:absolute;inset:0;z-index:20;display:none}
#cos-menu #sfShade.on{display:block}

/* bevestig- en report-venster */
#cos-menu #sfWin{position:absolute;inset:0;z-index:22;display:none;align-items:center;justify-content:center}
#cos-menu #sfWin.on{display:flex}
#cos-menu #sfWin .dim{position:absolute;inset:0;background:rgba(2,6,18,.7);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:cos-fade .2s ease both}
#cos-menu #sfWin .win{position:relative;width:56vw;padding:3vh 3.4vh 3.2vh;clip-path:polygon(2.4vh 0,100% 0,calc(100% - 2.4vh) 100%,0 100%);
  background:linear-gradient(180deg,rgba(14,30,72,.97),rgba(8,18,46,.96));box-shadow:0 2vh 6vh rgba(0,0,0,.6);animation:cos-up .26s cubic-bezier(.2,.8,.2,1) both}
#cos-menu #sfWin .win::after{content:'';position:absolute;left:0;right:0;bottom:0;height:.9vh;background:var(--red);box-shadow:0 0 2vh rgba(255,59,71,.6)}
#cos-menu #sfWin .k{font-family:'BC';font-weight:600;font-size:1.9vh;letter-spacing:.3em;color:#ff8a92}
#cos-menu #sfWin .t{font-family:'BC';font-weight:900;font-style:italic;font-size:4.8vh;line-height:.9;margin-top:.6vh}
#cos-menu #sfWin .t em{font-style:inherit;color:var(--yellow)}
#cos-menu #sfWin ul{list-style:none;margin-top:2vh;display:flex;flex-direction:column;gap:.8vh}
#cos-menu #sfWin li{display:flex;align-items:center;gap:1.2vh;font-size:2.2vh;color:#b9c7e8}
#cos-menu #sfWin li::before{content:'';width:.5vh;height:2vh;background:var(--red);transform:skewX(-14deg);flex:none}
#cos-menu #sfWin .reasons{display:grid;grid-template-columns:1fr 1fr;gap:1vh;margin-top:2vh}
#cos-menu #sfWin .r{height:6vh;display:flex;align-items:center;gap:1.2vh;padding:0 1.6vh;cursor:pointer;font-family:'BC';font-weight:700;font-style:italic;font-size:2.3vh;letter-spacing:.08em;
  background:rgba(255,255,255,.05);border:1px solid var(--line);clip-path:polygon(.8vh 0,100% 0,calc(100% - .8vh) 100%,0 100%)}
#cos-menu #sfWin .r i{width:2.2vh;height:2.2vh;border-radius:50%;border:.3vh solid var(--muted);flex:none}
#cos-menu #sfWin .r.on{border:2px solid var(--red);background:rgba(255,59,71,.1)}
#cos-menu #sfWin .r.on i{border-color:var(--red);background:radial-gradient(circle,var(--red) 45%,transparent 50%)}
#cos-menu #sfWin textarea{width:100%;height:9vh;margin-top:1.4vh;padding:1.2vh 1.6vh;resize:none;outline:none;font-family:'Barlow';font-size:2.1vh;color:var(--text);
  background:rgba(4,10,28,.65);border:1px solid var(--line)}
#cos-menu #sfWin textarea::placeholder{color:#5d6f99}
#cos-menu #sfWin .acts{display:flex;justify-content:flex-end;gap:1.2vh;margin-top:2.4vh}
#cos-menu #sfWin .b{height:6.6vh;padding:0 3vh;display:flex;align-items:center;font-family:'BC';font-weight:900;font-style:italic;font-size:2.7vh;letter-spacing:.1em;cursor:pointer;clip-path:polygon(1vh 0,100% 0,calc(100% - 1vh) 100%,0 100%)}
#cos-menu #sfWin .b.cancel{background:rgba(255,255,255,.08);border:1px solid var(--line);color:var(--text)}
#cos-menu #sfWin .b.go{background:var(--red);color:#fff;box-shadow:0 0 2vh rgba(255,59,71,.45)}
#cos-menu #sfWin .b.off{opacity:.35;pointer-events:none}
#cos-menu #sfWin .b.busy{opacity:.7;pointer-events:none}

/* Clash of Soccer – Meldingen (belletje naast de profielnaam in de lobby). Toevoegen achteraan de menu-CSS. */
#cos-menu .lob .topl{display:flex;align-items:center;gap:1.4vh}
#cos-menu .cos-bell{position:relative;width:10vh;height:10vh;border-radius:50%;display:grid;place-items:center;cursor:pointer;flex:none;transition:transform .12s ease}
#cos-menu .cos-bell:active,#cos-menu .cos-bell.is-pressed{transform:scale(.93)}
#cos-menu .cos-bell svg{width:4.2vh;height:4.2vh;stroke:var(--text);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#cos-menu .cos-bell b{position:absolute;right:-.4vh;top:-.2vh;min-width:3.6vh;height:3.6vh;padding:0 .8vh;border-radius:99px;display:none;place-items:center;
  font-family:'BC';font-weight:900;font-size:2.1vh;color:#fff;background:var(--red);border:.3vh solid #0b1638;box-shadow:0 0 1.6vh rgba(255,59,71,.6)}
#cos-menu .cos-bell.has b{display:grid}
#cos-menu .cos-bell.has svg{animation:cos-ring 2.6s ease-in-out infinite;transform-origin:50% 10%}
@keyframes cos-ring{0%,82%,100%{transform:rotate(0)}85%{transform:rotate(14deg)}88%{transform:rotate(-12deg)}91%{transform:rotate(8deg)}94%{transform:rotate(-5deg)}}

/* paneel */
#cos-menu #ntf{position:absolute;inset:0;z-index:20;display:none}
#cos-menu #ntf.on{display:block}
#cos-menu #ntf .dim{position:absolute;inset:0;background:rgba(2,6,18,.55);animation:cos-fade .2s ease both}
#cos-menu #ntf .pnl{position:absolute;left:max(4.5vw,env(safe-area-inset-left));top:calc(max(4vh,env(safe-area-inset-top)) + 12vh);width:56vw;max-height:76vh;display:flex;flex-direction:column;
  padding:2.4vh 2.6vh 2.6vh;clip-path:polygon(1.8vh 0,100% 0,calc(100% - 1.8vh) 100%,0 100%);background:linear-gradient(180deg,rgba(14,30,72,.98),rgba(8,18,46,.97));
  box-shadow:0 2vh 6vh rgba(0,0,0,.6);animation:cos-up .22s cubic-bezier(.2,.8,.2,1) both}
#cos-menu #ntf .pnl::after{content:'';position:absolute;left:0;right:0;bottom:0;height:.8vh;background:var(--yellow);box-shadow:0 0 2vh rgba(255,210,63,.6)}
#cos-menu #ntf .hd{display:flex;align-items:center;justify-content:space-between;gap:2vh}
#cos-menu #ntf .t{font-family:'BC';font-weight:900;font-style:italic;font-size:4vh;line-height:.9}
#cos-menu #ntf .t small{font-family:'BC';font-weight:600;font-style:normal;font-size:1.9vh;letter-spacing:.24em;color:var(--muted);margin-left:1.2vh}
#cos-menu #ntf .all{height:4.8vh;padding:0 1.8vh;display:flex;align-items:center;cursor:pointer;font-family:'BC';font-weight:700;font-style:italic;font-size:2vh;letter-spacing:.14em;color:var(--text);
  background:rgba(255,255,255,.07);border:1px solid var(--line);clip-path:polygon(.7vh 0,100% 0,calc(100% - .7vh) 100%,0 100%)}
#cos-menu #ntf .all.off{opacity:.35;pointer-events:none}
#cos-menu #ntf .list{margin-top:1.6vh;display:flex;flex-direction:column;gap:.8vh;overflow:auto;min-height:0}
#cos-menu #ntf .n{position:relative;display:flex;align-items:center;gap:1.6vh;padding:1.2vh 1.6vh 1.2vh 1.2vh;cursor:pointer;background:rgba(255,255,255,.035);border:1px solid var(--line);
  clip-path:polygon(.9vh 0,100% 0,calc(100% - .9vh) 100%,0 100%);animation:cos-up .3s ease both}
#cos-menu #ntf .n:hover{background:rgba(255,255,255,.06)}
#cos-menu #ntf .n.new{background:rgba(255,210,63,.06);border-color:rgba(255,210,63,.3)}
#cos-menu #ntf .ic{width:5.6vh;height:5.6vh;flex:none;display:grid;place-items:center;clip-path:polygon(.6vh 0,100% 0,calc(100% - .6vh) 100%,0 100%);background:var(--c);color:var(--ic,#07112b)}
#cos-menu #ntf .ic svg{width:3vh;height:3vh;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
#cos-menu #ntf .ic i{font-family:'BC';font-weight:900;font-style:italic;font-size:3vh}
#cos-menu #ntf .tx{flex:1;min-width:0;font-size:2.2vh;line-height:1.3;color:#d6e0f7}
#cos-menu #ntf .tx b{font-family:'BC';font-weight:900;font-style:italic;font-size:2.5vh;letter-spacing:.04em;color:#fff}
#cos-menu #ntf .tx span{display:block;font-family:'BC';font-weight:600;font-size:1.7vh;letter-spacing:.22em;color:var(--muted);margin-top:.3vh}
#cos-menu #ntf .n .dot{width:1.4vh;height:1.4vh;border-radius:50%;flex:none;background:var(--yellow);box-shadow:0 0 1vh var(--yellow);opacity:0}
#cos-menu #ntf .n.new .dot{opacity:1}
#cos-menu #ntf .empty{padding:5vh 0 3vh;text-align:center;font-family:'BC';font-weight:700;font-style:italic;font-size:2.6vh;letter-spacing:.14em;color:var(--muted)}

/* Clash of Soccer – Chairman overdragen zonder te vertrekken. Toevoegen achteraan de menu-CSS. */
#cos-menu .b.sm.chairb{display:inline-grid;place-items:center;padding:0;width:4.8vh;min-width:0;color:var(--yellow);background:rgba(255,210,63,.08);border:1px solid rgba(255,210,63,.45)}
#cos-menu .b.sm.chairb svg{width:2.6vh;height:2.6vh;fill:currentColor}
#cos-menu .b.sm.chairb:hover{background:rgba(255,210,63,.18)}

#cos-menu #chx{position:absolute;inset:0;z-index:20;display:none;align-items:center;justify-content:center}
#cos-menu #chx.on{display:flex}
#cos-menu #chx .dim{position:absolute;inset:0;background:rgba(2,6,18,.7);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:cos-fade .2s ease both}
#cos-menu #chx .win{position:relative;width:56vw;padding:3.2vh 3.6vh 3.4vh;clip-path:polygon(2.4vh 0,100% 0,calc(100% - 2.4vh) 100%,0 100%);
  background:linear-gradient(180deg,rgba(14,30,72,.97),rgba(8,18,46,.96));box-shadow:0 2vh 6vh rgba(0,0,0,.6);animation:cos-up .26s cubic-bezier(.2,.8,.2,1) both}
#cos-menu #chx .win::after{content:'';position:absolute;left:0;right:0;bottom:0;height:.9vh;background:var(--yellow);box-shadow:0 0 2vh rgba(255,210,63,.6)}
#cos-menu #chx .top{display:flex;align-items:center;gap:2.4vh}
#cos-menu #chx .swap{display:flex;align-items:center;gap:1vh;flex:none}
#cos-menu #chx .av{width:8.4vh;height:8.4vh;position:relative;overflow:hidden;clip-path:polygon(1vh 0,100% 0,calc(100% - 1vh) 100%,0 100%);
  background:linear-gradient(160deg,color-mix(in srgb,var(--c) 80%,#fff),color-mix(in srgb,var(--c) 60%,#000))}
#cos-menu #chx .av img{position:absolute;left:50%;top:2%;height:128%;transform:translateX(-50%);image-rendering:pixelated}
#cos-menu #chx .av i{position:absolute;inset:0;display:grid;place-items:center;font-family:'BC';font-weight:900;font-style:italic;font-size:3.6vh;color:#fff}
#cos-menu #chx .av .bd{position:absolute;right:.3vh;top:.3vh;width:3.2vh;height:3.2vh;display:grid;place-items:center;background:var(--yellow);color:#07112b;font-family:'BC';font-weight:900;font-style:italic;font-size:2vh;
  clip-path:polygon(.5vh 0,100% 0,calc(100% - .5vh) 100%,0 100%)}
#cos-menu #chx .av .bd svg{width:88%;height:88%;fill:#07112b}
#cos-menu #chx .arrow{width:3.4vh;height:3.4vh;stroke:var(--yellow);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
#cos-menu #chx .k{font-family:'BC';font-weight:600;font-size:1.9vh;letter-spacing:.3em;color:var(--yellow)}
#cos-menu #chx .t{font-family:'BC';font-weight:900;font-style:italic;font-size:4.8vh;line-height:.9;margin-top:.6vh}
#cos-menu #chx .t em{font-style:inherit;color:var(--yellow)}
#cos-menu #chx ul{list-style:none;margin-top:2.2vh;display:flex;flex-direction:column;gap:.8vh}
#cos-menu #chx li{display:flex;align-items:center;gap:1.2vh;font-size:2.2vh;color:#b9c7e8}
#cos-menu #chx li::before{content:'';width:.5vh;height:2vh;background:var(--yellow);transform:skewX(-14deg);flex:none}
#cos-menu #chx li.warn::before{background:var(--red)}
#cos-menu #chx .acts{display:flex;justify-content:flex-end;gap:1.2vh;margin-top:2.6vh}
#cos-menu #chx .b{height:6.8vh;padding:0 3vh;display:flex;align-items:center;font-family:'BC';font-weight:900;font-style:italic;font-size:2.8vh;letter-spacing:.1em;cursor:pointer;clip-path:polygon(1vh 0,100% 0,calc(100% - 1vh) 100%,0 100%)}
#cos-menu #chx .b.cancel{background:rgba(255,255,255,.08);border:1px solid var(--line);color:var(--text)}
#cos-menu #chx .b.go{background:var(--yellow);color:#07112b}
#cos-menu #chx .b.busy{opacity:.7;pointer-events:none}
/* actiekolom iets breder voor de extra stropdas-knop (36vh -> 42vh) */
#cos-menu #teammanage .mrow{grid-template-columns:5.6vh 1fr 7vh 8vh 7vh 7vh 8vh 42vh}
#cos-menu #teammanage .mrow .acts{justify-content:flex-end}

/* Clash of Soccer – Rol bij de huidige club tonen in Career. Toevoegen achteraan de menu-CSS. */
#cos-menu #career .tag.role{display:none;gap:.9vh;padding:0 1.4vh 0 .5vh;color:var(--yellow);background:rgba(255,210,63,.08);border:1px solid rgba(255,210,63,.5)}
#cos-menu #career .tag.role.on{display:inline-flex}
#cos-menu #career .tag.role .ic{width:3.1vh;height:3.1vh;display:grid;place-items:center;flex:none;background:var(--yellow);color:#07112b;
  font-family:'BC';font-weight:900;font-style:italic;font-size:2vh;clip-path:polygon(.5vh 0,100% 0,calc(100% - .5vh) 100%,0 100%)}
#cos-menu #career .tag.role .ic svg{width:90%;height:90%;fill:#07112b}

/* Clash of Soccer – QUICK MATCH-kaart + Play-scherm met 5 kaarten. Toevoegen achteraan de menu-CSS. */

/* ruimte voor 5 kaarten: kaartenblok breder, kop iets smaller */
#cos-menu #play .cards{width:68vw;gap:1.2vh}
#cos-menu #play .head .d{max-width:20vw;font-size:2.5vh}
#cos-menu #play .head .t{font-size:12vh}
#cos-menu #play .pan{padding:2.4vh 2.2vh;min-width:0}
#cos-menu #play .pan .t{font-size:4.8vh;line-height:.92}
#cos-menu #play .pan .x{font-size:2.1vh}
#cos-menu #play .pan .n{font-size:9.5vh}
#cos-menu #play .pan .meta{font-size:1.8vh;letter-spacing:.18em}
#cos-menu #play .pan .meta .arr{width:4.2vh;height:4.2vh;flex:none}
#cos-menu #play .pan .meta span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* QUICK MATCH: rood-tegen-blauw */
#cos-menu #play .pan.qm::before{height:60%;background:
  radial-gradient(70% 90% at 0% 0%, rgba(255,59,71,.42), transparent 70%),
  radial-gradient(70% 90% at 100% 0%, rgba(47,107,255,.5), transparent 70%)}
#cos-menu #play .pan.qm::after{background:linear-gradient(90deg,#ff3b47 0 50%,#2f6bff 50% 100%);box-shadow:-2vh 0 2vh rgba(255,59,71,.45),2vh 0 2vh rgba(47,107,255,.45)}
/* VS-teken bovenin */
#cos-menu #play .pan.qm .vs{position:absolute;left:2.2vh;top:2.2vh;display:flex;align-items:center;gap:.7vh;font-family:'BC';font-weight:900;font-style:italic;font-size:2.2vh;letter-spacing:.06em}
#cos-menu #play .pan.qm .vs i{width:2.6vh;height:2.6vh;transform:skewX(-14deg);border-radius:.3vh}
#cos-menu #play .pan.qm .vs i.r{background:#ff3b47;box-shadow:0 0 1.4vh rgba(255,59,71,.7)}
#cos-menu #play .pan.qm .vs i.b{background:#2f6bff;box-shadow:0 0 1.4vh rgba(47,107,255,.7)}
#cos-menu #play .pan.qm .vs b{color:#fff;opacity:.85}
/* LIVE-label */
#cos-menu #play .pan.qm .live{position:absolute;left:2.2vh;top:6.2vh;z-index:2;display:flex;align-items:center;gap:.7vh;height:3.2vh;padding:0 1.1vh;
  font-family:'BC';font-weight:700;font-style:italic;font-size:1.8vh;letter-spacing:.16em;color:#fff;background:rgba(255,59,71,.9);border-radius:.6vh}
#cos-menu #play .pan.qm .live i{width:1vh;height:1vh;border-radius:50%;background:#fff;animation:qm-live 1.4s ease-in-out infinite}
@keyframes qm-live{0%,100%{opacity:1}50%{opacity:.25}}
#cos-menu #play .pan.qm .meta i{background:var(--green)}
#cos-menu #play .pan.qm .meta .arr{background:linear-gradient(135deg,#ff3b47,#2f6bff);border:0;color:#fff}
/* offline: niet klikbaar */
#cos-menu #play .pan.qm.is-offline{pointer-events:none;filter:saturate(.25) brightness(.75)}
#cos-menu #play .pan.qm.is-offline .live{background:#3a4b78}
#cos-menu #play .pan.qm.is-offline .live i{animation:none;opacity:.5}

/* ===== Pakket 23: TEAM MATCHES (teammatches.css) ===== */
#cos-menu #tmatch .thd{position:absolute;left:calc(max(4.5vw,env(safe-area-inset-left)) + 21vh);top:max(4vh,env(safe-area-inset-top));display:flex;align-items:center;gap:1.6vh}
#cos-menu #tmatch .thd .bar{width:1vh;height:7.4vh;background:var(--purple);transform:skewX(-14deg);border-radius:.4vh;box-shadow:0 0 2vh var(--purple)}
#cos-menu #tmatch .thd .t{font-family:'BC';font-weight:900;font-style:italic;font-size:5.4vh;line-height:.9}
#cos-menu #tmatch .thd .d{font-family:'BC';font-weight:600;font-size:1.9vh;letter-spacing:.3em;color:var(--muted);margin-top:.6vh}
#cos-menu #tmatch .thd .d b{color:var(--yellow);font-weight:600}
#cos-menu #tmatch .grid{position:absolute;left:max(4.5vw,env(safe-area-inset-left));right:max(4.5vw,env(safe-area-inset-right));top:17vh;bottom:16vh;display:grid;grid-template-columns:38fr 62fr;gap:1.6vh}
#cos-menu #tmatch .box{position:relative;display:flex;flex-direction:column;padding:2.4vh 2.8vh 2.6vh;min-height:0;
  clip-path:polygon(1.6vh 0,100% 0,calc(100% - 1.6vh) 100%,0 100%);background:linear-gradient(180deg,rgba(18,34,80,.86),rgba(9,19,48,.86));box-shadow:0 2vh 4vh rgba(0,0,0,.35)}
#cos-menu #tmatch .box::after{content:'';position:absolute;left:0;right:0;bottom:0;height:.9vh;background:var(--c,var(--purple));box-shadow:0 0 2vh var(--c,var(--purple))}
#cos-menu #tmatch .h{display:flex;align-items:flex-end;justify-content:space-between;gap:1vh}
#cos-menu #tmatch .h b{font-family:'BC';font-weight:900;font-style:italic;font-size:3.6vh;line-height:.9}
#cos-menu #tmatch .h span{font-family:'BC';font-weight:600;font-size:1.8vh;letter-spacing:.24em;color:var(--muted)}
#cos-menu #tmatch .h span em{font-style:normal;color:var(--text);font-weight:900;font-size:2.4vh;letter-spacing:.04em}
#cos-menu #tmatch .s{font-size:2vh;color:#b9c7e8;margin-top:.6vh}
/* mijn team */
#cos-menu #tmatch .me{display:flex;align-items:center;gap:1.6vh;margin-top:1.6vh}
#cos-menu #tmatch .cr{width:6.6vh;height:6.6vh;flex:none;display:grid;place-items:center;font-family:'BC';font-weight:900;font-style:italic;font-size:2.3vh;color:#fff;
  clip-path:polygon(.8vh 0,100% 0,calc(100% - .8vh) 100%,0 100%);background:linear-gradient(135deg,color-mix(in srgb,var(--tc) 75%,#fff),color-mix(in srgb,var(--tc) 70%,#000));text-shadow:0 .3vh 0 rgba(0,0,0,.35)}
#cos-menu #tmatch .me .nm{font-family:'BC';font-weight:900;font-style:italic;font-size:3.4vh;line-height:.95}
#cos-menu #tmatch .me .nm small{display:block;font-family:'BC';font-weight:600;font-style:normal;font-size:1.7vh;letter-spacing:.22em;color:var(--muted);margin-top:.4vh}
#cos-menu #tmatch .rows{margin-top:1.4vh;display:flex;flex-direction:column;gap:.7vh;overflow:hidden;min-height:0}
#cos-menu #tmatch .r{display:flex;align-items:center;gap:1.2vh;height:5.4vh;padding:0 1.2vh;background:rgba(255,255,255,.04);border:1px solid var(--line);clip-path:polygon(.7vh 0,100% 0,calc(100% - .7vh) 100%,0 100%)}
#cos-menu #tmatch .r .av{width:3.8vh;height:3.8vh;flex:none;position:relative;overflow:hidden;clip-path:polygon(.5vh 0,100% 0,calc(100% - .5vh) 100%,0 100%);background:linear-gradient(160deg,color-mix(in srgb,var(--pc) 80%,#fff),color-mix(in srgb,var(--pc) 60%,#000))}
#cos-menu #tmatch .r .av img{position:absolute;left:50%;top:2%;height:128%;transform:translateX(-50%);image-rendering:pixelated}
#cos-menu #tmatch .r .n{flex:1;font-family:'BC';font-weight:900;font-style:italic;font-size:2.4vh;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cos-menu #tmatch .r .n i{font-style:normal;font-weight:600;font-size:1.6vh;letter-spacing:.18em;color:var(--yellow);margin-left:.8vh}
#cos-menu #tmatch .pill{height:3vh;display:flex;align-items:center;gap:.6vh;padding:0 1vh;font-family:'BC';font-weight:700;font-style:italic;font-size:1.6vh;letter-spacing:.14em;border-radius:.5vh;flex:none}
#cos-menu #tmatch .pill::before{content:'';width:.9vh;height:.9vh;border-radius:50%;background:currentColor}
#cos-menu #tmatch .pill.ok{color:var(--green);background:rgba(63,209,106,.12);border:1px solid rgba(63,209,106,.45)}
#cos-menu #tmatch .pill.no{color:#8fa3cf;background:rgba(255,255,255,.05);border:1px solid var(--line)}
#cos-menu #tmatch .pill.off{color:#5d6f99;border:1px solid rgba(255,255,255,.06)}
#cos-menu #tmatch .pill.wait{color:var(--yellow);background:rgba(255,210,63,.1);border:1px solid rgba(255,210,63,.4)}
#cos-menu #tmatch .need{margin-top:auto;padding-top:1.4vh;display:flex;align-items:center;gap:1.2vh;font-family:'BC';font-weight:600;font-size:1.8vh;letter-spacing:.2em;color:var(--muted)}
#cos-menu #tmatch .need .mt{flex:1;height:.8vh;border-radius:1vh;background:rgba(255,255,255,.08);overflow:hidden}
#cos-menu #tmatch .need .mt i{display:block;height:100%;background:var(--green);box-shadow:0 0 1vh var(--green)}
#cos-menu #tmatch .need b{color:var(--text)}
#cos-menu #tmatch .rdy{margin-top:1.2vh;height:7vh;display:flex;align-items:center;justify-content:center;gap:1.2vh;cursor:pointer;font-family:'BC';font-weight:900;font-style:italic;font-size:3vh;letter-spacing:.1em;
  color:#07112b;background:var(--yellow);clip-path:polygon(1vh 0,100% 0,calc(100% - 1vh) 100%,0 100%);box-shadow:0 0 2.4vh rgba(255,210,63,.35)}
#cos-menu #tmatch .rdy.on{background:var(--green)}
#cos-menu #tmatch .rdy svg{width:3vh;height:3vh;stroke:currentColor;fill:none;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
/* tegenstanders */
#cos-menu #tmatch .list{margin-top:1.4vh;display:flex;flex-direction:column;gap:.8vh;min-height:0;overflow:hidden}
#cos-menu #tmatch .tr{display:flex;align-items:center;gap:1.6vh;height:7.4vh;padding:0 1.2vh;background:rgba(255,255,255,.04);border:1px solid var(--line);clip-path:polygon(.9vh 0,100% 0,calc(100% - .9vh) 100%,0 100%)}
#cos-menu #tmatch .tr .cr{width:5.2vh;height:5.2vh;font-size:1.9vh}
#cos-menu #tmatch .tr .tn{flex:1;min-width:0}
#cos-menu #tmatch .tr .tn b{display:block;font-family:'BC';font-weight:900;font-style:italic;font-size:2.8vh;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cos-menu #tmatch .tr .tn span{display:block;font-family:'BC';font-weight:600;font-size:1.6vh;letter-spacing:.2em;color:var(--muted);margin-top:.4vh}
#cos-menu #tmatch .tr .tn span em{font-style:normal;color:var(--green)}
#cos-menu #tmatch .btn{height:5.4vh;padding:0 2.2vh;display:flex;align-items:center;gap:1vh;cursor:pointer;flex:none;font-family:'BC';font-weight:900;font-style:italic;font-size:2.3vh;letter-spacing:.1em;
  clip-path:polygon(.9vh 0,100% 0,calc(100% - .9vh) 100%,0 100%)}
#cos-menu #tmatch .btn svg{width:2.4vh;height:2.4vh;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
#cos-menu #tmatch .btn.ch{background:var(--purple);color:#fff;box-shadow:0 0 2vh rgba(155,91,255,.4)}
#cos-menu #tmatch .btn.off{background:rgba(255,255,255,.05);color:#5d6f99;box-shadow:none;border:1px solid var(--line);pointer-events:none}
#cos-menu #tmatch .btn.acc{background:var(--green);color:#07112b}
#cos-menu #tmatch .btn.dec{background:rgba(255,255,255,.08);border:1px solid var(--line);color:var(--text);width:5.4vh;padding:0;justify-content:center}
#cos-menu #tmatch .btn.cxl{background:transparent;border:1px solid rgba(255,59,71,.55);color:#ff8a92}
#cos-menu #tmatch .btn.join{background:var(--yellow);color:#07112b;height:7vh;font-size:3vh;padding:0 4vh;box-shadow:0 0 2.4vh rgba(255,210,63,.4)}
/* inkomende uitdaging */
#cos-menu #tmatch .inc{display:flex;align-items:center;gap:1.6vh;height:8.4vh;padding:0 1.2vh 0 1.4vh;margin-top:1.4vh;background:linear-gradient(90deg,rgba(255,210,63,.18),rgba(255,210,63,.05));border:1px solid rgba(255,210,63,.55);
  clip-path:polygon(.9vh 0,100% 0,calc(100% - .9vh) 100%,0 100%);animation:tm-glow 1.8s ease-in-out infinite}
@keyframes tm-glow{50%{background:linear-gradient(90deg,rgba(255,210,63,.28),rgba(255,210,63,.08))}}
#cos-menu #tmatch .inc .tn b{display:block;font-family:'BC';font-weight:900;font-style:italic;font-size:2.8vh;line-height:1}
#cos-menu #tmatch .inc .tn span{display:block;white-space:nowrap;font-family:'BC';font-weight:700;font-style:italic;font-size:1.7vh;letter-spacing:.18em;color:var(--yellow);margin-top:.4vh}
#cos-menu #tmatch .inc .tn{flex:1}
#cos-menu #tmatch .sec{font-family:'BC';font-weight:600;font-size:1.7vh;letter-spacing:.26em;color:var(--muted);margin-top:1.6vh}
/* groot midden (wachten / match) */
#cos-menu #tmatch .stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.6vh;text-align:center}
#cos-menu #tmatch .vsrow{display:flex;align-items:center;gap:3vh}
#cos-menu #tmatch .vsrow .side{display:flex;flex-direction:column;align-items:center;gap:.8vh;width:17vh}
#cos-menu #tmatch .vsrow .cr{width:9vh;height:9vh;font-size:3vh}
#cos-menu #tmatch .vsrow .side b{font-family:'BC';font-weight:900;font-style:italic;font-size:2.6vh;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
#cos-menu #tmatch .vsrow .vs{width:7vh;height:7vh;display:grid;place-items:center;position:relative}
#cos-menu #tmatch .vsrow .vs::before{content:'';position:absolute;inset:.8vh;transform:rotate(45deg);background:linear-gradient(135deg,#ffe27a,var(--yellow) 45%,#e8aa00);box-shadow:0 0 3vh rgba(255,210,63,.4)}
#cos-menu #tmatch .vsrow .vs span{position:relative;font-family:'BC';font-weight:900;font-style:italic;font-size:3vh;color:#07112b}
#cos-menu #tmatch .vsrow .q{opacity:.45;filter:grayscale(.4)}
#cos-menu #tmatch .stage .big{font-family:'BC';font-weight:900;font-style:italic;font-size:4.2vh;letter-spacing:.04em;display:flex;align-items:center;gap:1.4vh}
#cos-menu #tmatch .stage .big .sp{width:3vh;height:3vh;border-radius:50%;border:.4vh solid rgba(255,255,255,.15);border-top-color:var(--yellow);animation:tm-spin .8s linear infinite}
@keyframes tm-spin{to{transform:rotate(360deg)}}
#cos-menu #tmatch .stage .sub{font-size:2.1vh;color:#b9c7e8}
#cos-menu #tmatch .stage .sub b{font-family:'BC';font-weight:900;font-style:italic;color:var(--yellow);font-size:2.6vh}
#cos-menu #tmatch .slots{display:grid;grid-template-columns:1fr 1fr;gap:1vh 3vh;width:80%}
#cos-menu #tmatch .slots .r{height:5vh}
#cos-menu #tmatch .badge{display:inline-flex;align-items:center;gap:.8vh;height:3.4vh;padding:0 1.2vh;font-family:'BC';font-weight:700;font-style:italic;font-size:1.8vh;letter-spacing:.18em;border-radius:.5vh;color:#07112b;background:var(--yellow)}
#cos-menu #tmatch .badge.g{background:var(--green)}
#cos-menu #tmatch .rdy.lock{background:rgba(255,255,255,.07);color:#8fa3cf;box-shadow:none;border:1px solid var(--line);pointer-events:none}
#cos-menu #tmatch .rdy.lock{background:rgba(255,255,255,.07);color:#8fa3cf;box-shadow:none;border:1px solid var(--line);pointer-events:none}
#cos-menu #tmatch .stay{display:flex;align-items:center;gap:1vh;margin-top:1vh;font-size:1.8vh;color:#8fa3cf;line-height:1.3}
#cos-menu #tmatch .stay svg{width:2.2vh;height:2.2vh;flex:none;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#cos-menu #tmatch .empty{flex:1;display:grid;place-items:center;text-align:center;font-family:'BC';font-weight:700;font-style:italic;font-size:2.4vh;letter-spacing:.14em;color:var(--muted)}
#cos-menu #tmatch .tr.busy .btn,#cos-menu #tmatch .inc.busy .btn{opacity:.6;pointer-events:none}

/* toast in het venster (verlopen / geannuleerd / geweigerd) */
#cos-menu .cos-tmtoast{position:absolute;left:0;right:0;margin:auto;width:max-content;max-width:80vw;top:12vh;z-index:30;display:flex;align-items:center;gap:1.2vh;padding:1.4vh 2.6vh;
  font-family:'BC';font-weight:900;font-style:italic;font-size:2.5vh;letter-spacing:.08em;color:#fff;background:#3a4b78;clip-path:polygon(1vh 0,100% 0,calc(100% - 1vh) 100%,0 100%);
  box-shadow:0 1.4vh 3vh rgba(0,0,0,.45);animation:tm-t 3s ease both;pointer-events:none}
#cos-menu .cos-tmtoast.warn{background:var(--red)}
#cos-menu .cos-tmtoast.ok{background:var(--green);color:#07112b}
@keyframes tm-t{0%{opacity:0;transform:translateY(-1.5vh)}8%,88%{opacity:1;transform:none}100%{opacity:0}}

/* in-app banner (op ELK scherm, als je niet in het Team Matches-venster zit) */
#cos-menu #tmBanner{position:absolute;left:50%;top:max(2.4vh,env(safe-area-inset-top));z-index:40;display:none;width:50vw;margin-left:-25vw;align-items:center;gap:1.6vh;padding:1.2vh 1.2vh 1.2vh 1.4vh;
  background:linear-gradient(180deg,rgba(18,36,82,.98),rgba(10,22,54,.98));border:1px solid rgba(255,210,63,.55);box-shadow:0 2vh 5vh rgba(0,0,0,.55);
  clip-path:polygon(1vh 0,100% 0,calc(100% - 1vh) 100%,0 100%);animation:tm-drop .35s cubic-bezier(.2,.9,.3,1.2) both}
#cos-menu #tmBanner.on{display:flex}
@keyframes tm-drop{from{opacity:0;transform:translateY(-4vh)}}
#cos-menu #tmBanner .cr{width:6vh;height:6vh;flex:none;display:grid;place-items:center;font-family:'BC';font-weight:900;font-style:italic;font-size:2.1vh;color:#fff;
  clip-path:polygon(.7vh 0,100% 0,calc(100% - .7vh) 100%,0 100%);background:linear-gradient(135deg,color-mix(in srgb,var(--tc) 75%,#fff),color-mix(in srgb,var(--tc) 70%,#000))}
#cos-menu #tmBanner .tx{flex:1;min-width:0}
#cos-menu #tmBanner .tx b{display:block;font-family:'BC';font-weight:900;font-style:italic;font-size:2.7vh;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cos-menu #tmBanner .tx span{display:block;font-family:'BC';font-weight:700;font-style:italic;font-size:1.8vh;letter-spacing:.16em;color:var(--yellow);margin-top:.5vh}
#cos-menu #tmBanner .tm{font-family:'BC';font-weight:900;font-style:italic;font-size:2.6vh;color:var(--yellow);font-variant-numeric:tabular-nums;margin:0 .6vh}
#cos-menu #tmBanner .go{height:5.4vh;padding:0 2.2vh;display:flex;align-items:center;cursor:pointer;font-family:'BC';font-weight:900;font-style:italic;font-size:2.3vh;letter-spacing:.1em;
  background:var(--yellow);color:#07112b;clip-path:polygon(.9vh 0,100% 0,calc(100% - .9vh) 100%,0 100%)}
#cos-menu #tmBanner .x{width:5.4vh;height:5.4vh;display:grid;place-items:center;cursor:pointer;color:#8fa3cf;font-family:'BC';font-weight:900;font-size:2.6vh}

/* toestemming pushmeldingen (eenmalig, bij eerste keer READY) */
#cos-menu #tmPush{position:absolute;inset:0;z-index:22;display:none;align-items:center;justify-content:center}
#cos-menu #tmPush.on{display:flex}
#cos-menu #tmPush .dim{position:absolute;inset:0;background:rgba(2,6,18,.7);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
#cos-menu #tmPush .win{position:relative;width:54vw;padding:3vh 3.4vh 3.2vh;clip-path:polygon(2.4vh 0,100% 0,calc(100% - 2.4vh) 100%,0 100%);
  background:linear-gradient(180deg,rgba(14,30,72,.97),rgba(8,18,46,.96));box-shadow:0 2vh 6vh rgba(0,0,0,.6);animation:cos-up .26s cubic-bezier(.2,.8,.2,1) both}
#cos-menu #tmPush .win::after{content:'';position:absolute;left:0;right:0;bottom:0;height:.9vh;background:var(--purple);box-shadow:0 0 2vh var(--purple)}
#cos-menu #tmPush .top{display:flex;align-items:center;gap:2.2vh}
#cos-menu #tmPush .bell{width:8vh;height:8vh;flex:none;display:grid;place-items:center;background:var(--purple);clip-path:polygon(1vh 0,100% 0,calc(100% - 1vh) 100%,0 100%)}
#cos-menu #tmPush .bell svg{width:4.6vh;height:4.6vh;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#cos-menu #tmPush .k{font-family:'BC';font-weight:600;font-size:1.9vh;letter-spacing:.3em;color:#c3a0ff}
#cos-menu #tmPush .t{font-family:'BC';font-weight:900;font-style:italic;font-size:4.4vh;line-height:.9;margin-top:.6vh}
#cos-menu #tmPush .t em{font-style:inherit;color:var(--yellow)}
#cos-menu #tmPush ul{list-style:none;margin-top:2vh;display:flex;flex-direction:column;gap:.8vh}
#cos-menu #tmPush li{display:flex;align-items:center;gap:1.2vh;font-size:2.2vh;color:#b9c7e8}
#cos-menu #tmPush li::before{content:'';width:.5vh;height:2vh;background:var(--purple);transform:skewX(-14deg);flex:none}
#cos-menu #tmPush .acts{display:flex;justify-content:flex-end;gap:1.2vh;margin-top:2.6vh}
#cos-menu #tmPush .b{height:6.6vh;padding:0 3vh;display:flex;align-items:center;cursor:pointer;font-family:'BC';font-weight:900;font-style:italic;font-size:2.6vh;letter-spacing:.1em;clip-path:polygon(1vh 0,100% 0,calc(100% - 1vh) 100%,0 100%)}
#cos-menu #tmPush .b.no{background:rgba(255,255,255,.08);border:1px solid var(--line);color:var(--text)}
#cos-menu #tmPush .b.yes{background:var(--purple);color:#fff}

/* ===== Pakket 23b: REJOIN (rejoin.css) ===== */
/* ---- match loopt al: speler is eruit gegaan (REJOIN) ---- */
#cos-menu #tmatch .h .lv{display:inline-flex;align-items:center;gap:.7vh;font-family:'BC';font-weight:900;font-style:italic;font-size:2.2vh;letter-spacing:.12em;color:#ff6a73}
#cos-menu #tmatch .h .lv i{width:1vh;height:1vh;border-radius:50%;background:var(--red);box-shadow:0 0 1.2vh var(--red);animation:tm-blink 1.2s ease-in-out infinite}
@keyframes tm-blink{50%{opacity:.25}}
#cos-menu #tmatch .vsrow .score{display:flex;flex-direction:column;align-items:center;gap:.4vh;min-width:12vh}
#cos-menu #tmatch .vsrow .score b{font-family:'BC';font-weight:900;font-style:italic;font-size:6vh;line-height:.9;font-variant-numeric:tabular-nums}
#cos-menu #tmatch .vsrow .score b em{font-style:inherit;color:var(--muted);margin:0 .6vh}
#cos-menu #tmatch .vsrow .score span{font-family:'BC';font-weight:700;font-style:italic;font-size:1.8vh;letter-spacing:.16em;color:#ff6a73}
#cos-menu #tmatch .pill.play{color:var(--green);background:rgba(63,209,106,.12);border:1px solid rgba(63,209,106,.45)}
#cos-menu #tmatch .pill.left{color:#ff8a92;background:rgba(255,59,71,.12);border:1px solid rgba(255,59,71,.5)}
#cos-menu #tmatch .need-you{font-family:'BC';font-weight:900;font-style:italic;font-size:3vh;letter-spacing:.04em;line-height:1}
#cos-menu #tmatch .need-you em{font-style:inherit;color:var(--yellow)}
#cos-menu #tmatch .btn.rejoin{background:var(--red);color:#fff;height:7vh;font-size:3vh;padding:0 4vh;box-shadow:0 0 2.4vh rgba(255,59,71,.5);animation:tm-pulse 1.6s ease-in-out infinite}
@keyframes tm-pulse{50%{box-shadow:0 0 4vh rgba(255,59,71,.8);transform:scale(1.03)}}

/* ===== Pakket 24: MATCH CENTRE (matchcentre.css) ===== */
/* Clash of Soccer – MATCH CENTRE onder Team Matches (swipe omhoog). Toevoegen achteraan de menu-CSS, ná teammatches.css. */

/* twee pagina's boven elkaar; BACK en .foot blijven staan */
#cos-menu #tmatch .tm-pages{position:absolute;inset:0;overflow:hidden;z-index:1;pointer-events:none}
#cos-menu #tmatch .tm-track{position:absolute;left:0;right:0;top:0;height:200%;transition:transform .62s cubic-bezier(.22,.9,.24,1);will-change:transform}
#cos-menu #tmatch .tm-track.drag{transition:none}
#cos-menu #tmatch .tm-page{position:absolute;left:0;right:0;height:50%;pointer-events:auto}
#cos-menu #tmatch .tm-page.p1{top:0}
#cos-menu #tmatch .tm-page.p2{top:50%}
#cos-menu #tmatch.on-mc .tm-track{transform:translateY(-50%)}
#cos-menu #tmatch .topl,#cos-menu #tmatch .foot,#cos-menu #tmatch .topr{z-index:3}
/* FORMAT-chip alleen op pagina 1 */
#cos-menu #tmatch .topr{transition:opacity .3s}
#cos-menu #tmatch.on-mc .topr{opacity:0;pointer-events:none}

/* hint onderaan pagina 1 */
#cos-menu #tmatch .mc-hint{position:absolute;left:50%;bottom:max(3.4vh,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:4;display:flex;flex-direction:column;align-items:center;gap:.4vh;cursor:pointer;
  font-family:'BC';font-weight:700;font-style:italic;font-size:1.8vh;letter-spacing:.24em;color:#b9c7e8;transition:opacity .3s}
#cos-menu #tmatch .mc-hint .chev{width:3.2vh;height:2vh;animation:mc-bob 1.6s ease-in-out infinite}
#cos-menu #tmatch .mc-hint .chev svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
#cos-menu #tmatch .mc-hint .lbl{display:flex;align-items:center;gap:1vh;height:3.6vh;padding:0 1.4vh;border-radius:99px;background:rgba(6,14,38,.6);border:1px solid var(--line)}
#cos-menu #tmatch .mc-hint .lbl b{display:inline-flex;align-items:center;gap:.6vh;height:2.4vh;padding:0 .9vh;border-radius:99px;background:var(--red);color:#fff;font-style:normal;font-size:1.6vh;letter-spacing:.1em}
#cos-menu #tmatch .mc-hint .lbl b i{width:.8vh;height:.8vh;border-radius:50%;background:#fff;animation:mc-live 1.2s ease-in-out infinite}
#cos-menu #tmatch.on-mc .mc-hint{opacity:0;pointer-events:none}
@keyframes mc-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-.6vh)}}
@keyframes mc-live{50%{opacity:.25}}
/* versie-tekst wijkt voor de hint */
#cos-menu #tmatch .foot .ver{opacity:0}

/* pagina 2: kop + terug-greep */
#cos-menu #tmatch .p2 .thd .bar{background:var(--red);box-shadow:0 0 2vh var(--red)}
#cos-menu #tmatch .mc-up{position:absolute;left:50%;top:max(1.2vh,env(safe-area-inset-top));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.2vh;cursor:pointer;
  font-family:'BC';font-weight:700;font-style:italic;font-size:1.6vh;letter-spacing:.24em;color:#8fa3cf}
#cos-menu #tmatch .mc-up i{width:6vh;height:.6vh;border-radius:1vh;background:rgba(255,255,255,.3)}
#cos-menu #tmatch .mc-up svg{width:2.8vh;height:1.6vh;stroke:currentColor;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
#cos-menu #tmatch .p2 .grid{grid-template-columns:1fr 1fr}
#cos-menu #tmatch .p2 .box.live{--c:var(--red)}
#cos-menu #tmatch .p2 .box.res{--c:var(--blue)}
#cos-menu #tmatch .flt{display:flex;gap:.6vh}
#cos-menu #tmatch .flt span{height:3.2vh;padding:0 1.2vh;display:flex;align-items:center;cursor:pointer;font-family:'BC';font-weight:700;font-style:italic;font-size:1.6vh;letter-spacing:.16em;color:var(--muted);
  border:1px solid var(--line);border-radius:.5vh}
#cos-menu #tmatch .flt span.on{background:var(--yellow);color:#07112b;border-color:transparent}
#cos-menu #tmatch .mlist{margin-top:1.4vh;display:flex;flex-direction:column;gap:.8vh;overflow:auto;min-height:0;scrollbar-width:none}
#cos-menu #tmatch .mlist::-webkit-scrollbar{display:none}
#cos-menu #tmatch .m{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.2vh;min-height:7.6vh;padding:.8vh 1.2vh;position:relative;
  background:rgba(255,255,255,.04);border:1px solid var(--line);clip-path:polygon(.9vh 0,100% 0,calc(100% - .9vh) 100%,0 100%)}
#cos-menu #tmatch .m.mine{background:rgba(255,210,63,.07);border-color:rgba(255,210,63,.4)}
#cos-menu #tmatch .m .t{display:flex;align-items:center;gap:1vh;min-width:0}
#cos-menu #tmatch .m .t.hm{justify-content:flex-end;text-align:right}
#cos-menu #tmatch .m .t.aw{justify-content:flex-start}
#cos-menu #tmatch .m .t b{font-family:'BC';font-weight:900;font-style:italic;font-size:2.3vh;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cos-menu #tmatch .m .t .cr{width:4.4vh;height:4.4vh;font-size:1.6vh}
#cos-menu #tmatch .m .t.lose b{color:#8fa3cf}
#cos-menu #tmatch .m .sc{display:flex;flex-direction:column;align-items:center;gap:.3vh;min-width:12vh}
#cos-menu #tmatch .m .sc .s{font-family:'BC';font-weight:900;font-style:italic;font-size:3.4vh;line-height:.9;font-variant-numeric:tabular-nums;letter-spacing:.04em}
#cos-menu #tmatch .m .sc .s em{font-style:inherit;color:var(--muted);margin:0 .5vh}
#cos-menu #tmatch .m .sc .st{display:flex;align-items:center;gap:.6vh;font-family:'BC';font-weight:700;font-style:italic;font-size:1.5vh;letter-spacing:.16em;color:var(--muted)}
#cos-menu #tmatch .m .sc .st.lv{color:#ff6a73}
#cos-menu #tmatch .m .sc .st.lv i{width:.9vh;height:.9vh;border-radius:50%;background:var(--red);box-shadow:0 0 1vh var(--red);animation:mc-live 1.2s ease-in-out infinite}
/* W/D/L voor je eigen team: streep links + letter in de statusregel */
#cos-menu #tmatch .m .wl{position:absolute;left:0;top:0;bottom:0;width:.7vh}
#cos-menu #tmatch .m .wl.w{background:var(--green);box-shadow:0 0 1.4vh var(--green)}#cos-menu #tmatch .m .wl.l{background:var(--red);box-shadow:0 0 1.4vh var(--red)}#cos-menu #tmatch .m .wl.d{background:#8fa3cf}
#cos-menu #tmatch .m .st b.r{display:inline-flex;align-items:center;justify-content:center;height:2.4vh;min-width:2.4vh;line-height:1;font-size:1.8vh;font-style:italic;font-weight:900;letter-spacing:0;padding:0 .4vh;border-radius:.3vh;color:#07112b;margin-right:.4vh}
#cos-menu #tmatch .m .st b.r.w{background:var(--green)}#cos-menu #tmatch .m .st b.r.l{background:var(--red);color:#fff}#cos-menu #tmatch .m .st b.r.d{background:#8fa3cf}
#cos-menu #tmatch .mempty{flex:1;display:grid;place-items:center;text-align:center;font-family:'BC';font-weight:700;font-style:italic;font-size:2.3vh;letter-spacing:.14em;color:var(--muted)}

/* COS-FIX (pakket 24): de onderbalk ligt boven de pagina's - het onzichtbare versielabel ving de tik op de hint (opende What's New). Alleen ONLINE en CHAT blijven tikbaar. */
#cos-menu #tmatch .foot{pointer-events:none}
#cos-menu #tmatch .foot > *{pointer-events:auto}
#cos-menu #tmatch .foot .ver{pointer-events:none}

/* ===== Pakket 25: READY / LIVE-meldingen (badges.css) ===== */
/* Clash of Soccer – READY / LIVE-meldingen op de PLAY-knop (lobby) en de TEAM MATCHES-kaart (Play-scherm).
   Toevoegen achteraan de menu-CSS. */
#cos-menu .cos-tmb{position:absolute;z-index:3;display:none;gap:.8vh;pointer-events:none}
#cos-menu .cos-tmb.on{display:flex}
#cos-menu .cos-tmb span{height:3.4vh;display:inline-flex;align-items:center;gap:.7vh;padding:0 1.1vh;border-radius:.6vh;white-space:nowrap;
  font-family:'BC';font-weight:900;font-style:italic;font-size:1.8vh;letter-spacing:.12em;color:#fff;background:rgba(7,17,43,.88);box-shadow:0 .6vh 1.4vh rgba(0,0,0,.3)}
#cos-menu .cos-tmb span i{width:1vh;height:1vh;border-radius:50%;flex:none}
#cos-menu .cos-tmb .rd i{background:#3fd16a;box-shadow:0 0 1vh #3fd16a}
#cos-menu .cos-tmb .lv{background:#ff3b47}
#cos-menu .cos-tmb .lv i{background:#fff;animation:tmb-blink 1.2s ease-in-out infinite}
#cos-menu .cos-tmb .mine{background:#ff3b47;animation:tmb-pulse 1.4s ease-in-out infinite}
#cos-menu .cos-tmb .mine i{background:#fff;animation:tmb-blink .8s ease-in-out infinite}
#cos-menu .cos-tmb .join{background:#ffd23f;color:#07112b;animation:tmb-pulse 1.4s ease-in-out infinite}
#cos-menu .cos-tmb .join i{background:#07112b}
@keyframes tmb-blink{50%{opacity:.25}}
@keyframes tmb-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,59,71,.0)}50%{box-shadow:0 0 0 .5vh rgba(255,59,71,.35),0 0 2vh rgba(255,59,71,.6)}}

/* plek op de PLAY-knop in de lobby: rechtsboven in de gele kaart */
#cos-menu #lobby .pan.yel .cos-tmb{right:2.4vh;top:1.8vh}
/* plek op de TEAM MATCHES-kaart: linksboven (zoals SOON / VS-label op de andere kaarten) */
#cos-menu #play .pan .cos-tmb{left:2.2vh;top:2.2vh;flex-direction:column;align-items:flex-start;gap:.6vh}
/* subtiele gloed op de kaart zelf bij een live wedstrijd van je eigen team */
#cos-menu .pan.tmb-hot{box-shadow:0 0 0 2px rgba(255,59,71,.55),0 0 3vh rgba(255,59,71,.35)}

/* ===== Pakket 26: MATCH HISTORY (historie.css) ===== */
/* Clash of Soccer – MATCH HISTORY onder Career (swipe omhoog). Zelfde logica als Match Centre (pakket 24).
   Toevoegen achteraan de menu-CSS. Achtergrond blijft stil staan; alleen de inhoud schuift. */
#cos-menu #career .mh-pages{position:absolute;inset:0;overflow:hidden;z-index:1;pointer-events:none}
#cos-menu #career .mh-track{position:absolute;left:0;right:0;top:0;height:200%;transition:transform .62s cubic-bezier(.22,.9,.24,1);will-change:transform}
#cos-menu #career .mh-track.drag{transition:none}
#cos-menu #career .mh-page{position:absolute;left:0;right:0;height:50%;pointer-events:auto}
#cos-menu #career .mh-page.p1{top:0}
#cos-menu #career .mh-page.p2{top:50%}
#cos-menu #career.on-mh .mh-track{transform:translateY(-50%)}
#cos-menu #career .topl,#cos-menu #career .foot,#cos-menu #career .topr{z-index:3}
#cos-menu #career .topr{transition:opacity .3s}
#cos-menu #career.on-mh .topr{opacity:0;pointer-events:none}

/* hint onderaan pagina 1 */
#cos-menu #career .mh-hint{position:absolute;left:50%;bottom:max(3.4vh,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:4;display:flex;flex-direction:column;align-items:center;gap:.4vh;cursor:pointer;
  font-family:'BC';font-weight:700;font-style:italic;font-size:1.8vh;letter-spacing:.24em;color:#b9c7e8;transition:opacity .3s}
#cos-menu #career .mh-hint .chev{width:3.2vh;height:2vh;animation:mh-bob 1.6s ease-in-out infinite}
#cos-menu #career .mh-hint svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
#cos-menu #career .mh-hint .lbl{display:flex;align-items:center;gap:1vh;height:3.6vh;padding:0 1.4vh;border-radius:99px;background:rgba(6,14,38,.6);border:1px solid var(--line)}
#cos-menu #career .mh-hint .form{display:flex;gap:.3vh}
#cos-menu #career.on-mh .mh-hint{opacity:0;pointer-events:none}
#cos-menu #career .foot .ver{opacity:0}
@keyframes mh-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-.6vh)}}

/* greep bovenaan pagina 2 */
#cos-menu #career .mh-up{position:absolute;left:50%;top:max(1.2vh,env(safe-area-inset-top));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.2vh;cursor:pointer;
  font-family:'BC';font-weight:700;font-style:italic;font-size:1.6vh;letter-spacing:.24em;color:#8fa3cf}
#cos-menu #career .mh-up i{width:6vh;height:.6vh;border-radius:1vh;background:rgba(255,255,255,.3)}
#cos-menu #career .mh-up svg{width:2.8vh;height:1.6vh;stroke:currentColor;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

/* pagina 2 layout */
#cos-menu #career .p2 .head .bar{background:var(--blue);box-shadow:0 0 2vh var(--blue)}
#cos-menu #career .mh-grid{position:absolute;left:var(--L);right:var(--R);top:17.5vh;bottom:15.5vh;display:grid;grid-template-columns:30vw 1fr;gap:1.4vh}
#cos-menu #career .mh-box{position:relative;display:flex;flex-direction:column;padding:2.4vh 2.6vh 2.6vh;min-height:0;
  clip-path:polygon(1.6vh 0,100% 0,calc(100% - 1.6vh) 100%,0 100%);background:linear-gradient(180deg,rgba(18,34,80,.86),rgba(9,19,48,.86));box-shadow:0 2vh 4vh rgba(0,0,0,.35)}
#cos-menu #career .mh-box::after{content:'';position:absolute;left:0;right:0;bottom:0;height:.9vh;background:var(--c,var(--blue));box-shadow:0 0 2vh var(--c,var(--blue))}
#cos-menu #career .mh-h{display:flex;align-items:flex-end;justify-content:space-between;gap:1vh}
#cos-menu #career .mh-h b{font-family:'BC';font-weight:900;font-style:italic;font-size:3.6vh;line-height:.9}
#cos-menu #career .mh-h span{font-family:'BC';font-weight:600;font-size:1.8vh;letter-spacing:.24em;color:var(--muted)}
#cos-menu #career .mh-h span em{font-style:normal;color:var(--text);font-weight:900;font-size:2.4vh;letter-spacing:.04em}

/* samenvatting */
#cos-menu #career .mh-sum{--c:var(--yellow)}
#cos-menu #career .mh-lab{font-family:'BC';font-weight:600;font-size:1.7vh;letter-spacing:.26em;color:var(--muted);margin-top:2vh}
#cos-menu #career .mh-form{display:flex;gap:.6vh;margin-top:.9vh}
#cos-menu #career .fp{width:3.6vh;height:3.6vh;display:grid;place-items:center;font-family:'BC';font-weight:900;font-style:italic;font-size:1.9vh;color:#07112b;
  clip-path:polygon(.5vh 0,100% 0,calc(100% - .5vh) 100%,0 100%)}
#cos-menu #career .fp.w{background:var(--green)}#cos-menu #career .fp.l{background:var(--red);color:#fff}#cos-menu #career .fp.d{background:#8fa3cf}
#cos-menu #career .fp.e{background:rgba(255,255,255,.06)}
#cos-menu #career .mh-hint .fp{width:2.2vh;height:2.2vh;font-size:1.3vh}
#cos-menu #career .mh-wdl{display:grid;grid-template-columns:repeat(3,1fr);gap:.8vh;margin-top:1vh}
#cos-menu #career .mh-wdl div{padding:1.2vh 1vh;text-align:center;background:rgba(255,255,255,.05);border:1px solid var(--line);clip-path:polygon(.7vh 0,100% 0,calc(100% - .7vh) 100%,0 100%)}
#cos-menu #career .mh-wdl b{display:block;font-family:'BC';font-weight:900;font-style:italic;font-size:4vh;line-height:.9}
#cos-menu #career .mh-wdl span{display:block;font-family:'BC';font-weight:600;font-size:1.5vh;letter-spacing:.22em;color:var(--muted);margin-top:.4vh}
#cos-menu #career .mh-wdl .w b{color:var(--green)}#cos-menu #career .mh-wdl .l b{color:#ff6a73}
#cos-menu #career .mh-bar{display:flex;height:.9vh;border-radius:1vh;overflow:hidden;margin-top:1.2vh;background:rgba(255,255,255,.06)}
#cos-menu #career .mh-bar i{display:block;height:100%}
#cos-menu #career .mh-kv{display:grid;grid-template-columns:1fr 1fr;gap:1.2vh 1.6vh;margin-top:2.2vh}
#cos-menu #career .mh-kv div{display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:.6vh}
#cos-menu #career .mh-kv span{font-family:'BC';font-weight:600;font-size:1.6vh;letter-spacing:.2em;color:var(--muted)}
#cos-menu #career .mh-kv b{font-family:'BC';font-weight:900;font-style:italic;font-size:2.8vh}
#cos-menu #career .mh-kv b.y{color:var(--yellow)}

/* lijst */
#cos-menu #career .mh-tabs{display:flex;gap:.6vh}
#cos-menu #career .mh-tabs span{height:3.2vh;padding:0 1.2vh;display:flex;align-items:center;cursor:pointer;font-family:'BC';font-weight:700;font-style:italic;font-size:1.6vh;letter-spacing:.16em;color:var(--muted);border:1px solid var(--line);border-radius:.5vh}
#cos-menu #career .mh-tabs span.on{background:var(--yellow);color:#07112b;border-color:transparent}
#cos-menu #career .mh-list{margin-top:1.4vh;display:flex;flex-direction:column;gap:.8vh;overflow:auto;min-height:0;scrollbar-width:none}
#cos-menu #career .mh-list::-webkit-scrollbar{display:none}
#cos-menu #career .mm{position:relative;display:grid;grid-template-columns:12vh 1fr auto 1fr 12vh;align-items:center;gap:1.2vh;min-height:7.2vh;padding:.6vh 1.4vh .6vh 1.6vh;
  background:rgba(255,255,255,.04);border:1px solid var(--line);clip-path:polygon(.9vh 0,100% 0,calc(100% - .9vh) 100%,0 100%)}
#cos-menu #career .mm::before{content:'';position:absolute;left:0;top:0;bottom:0;width:.7vh;background:var(--rc)}
#cos-menu #career .mm.w{--rc:var(--green)}#cos-menu #career .mm.l{--rc:var(--red)}#cos-menu #career .mm.d{--rc:#8fa3cf}
#cos-menu #career .mm .ty{display:flex;flex-direction:column;gap:.4vh}
#cos-menu #career .mm .ty b{white-space:nowrap;display:inline-flex;align-self:flex-start;height:2.6vh;align-items:center;padding:0 .8vh;border-radius:.4vh;font-family:'BC';font-weight:900;font-style:italic;font-size:1.5vh;letter-spacing:.12em}
#cos-menu #career .mm .ty b.tm{background:rgba(155,91,255,.2);color:#c3a0ff;border:1px solid rgba(155,91,255,.5)}
#cos-menu #career .mm .ty b.mk{background:rgba(255,210,63,.14);color:var(--yellow);border:1px solid rgba(255,210,63,.45)}
#cos-menu #career .mm .ty span{font-family:'BC';font-weight:600;font-size:1.4vh;letter-spacing:.16em;color:#5d6f99}
#cos-menu #career .mm .t{display:flex;align-items:center;gap:1vh;min-width:0}
#cos-menu #career .mm .t.hm{justify-content:flex-end;text-align:right}
#cos-menu #career .mm .t b{font-family:'BC';font-weight:900;font-style:italic;font-size:2.2vh;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cos-menu #career .mm .t.me b{color:var(--yellow)}
#cos-menu #career .mm .t.lose b{color:#8fa3cf}
#cos-menu #career .mm .cr{width:4vh;height:4vh;flex:none;display:grid;place-items:center;font-family:'BC';font-weight:900;font-style:italic;font-size:1.5vh;color:#fff;
  clip-path:polygon(.5vh 0,100% 0,calc(100% - .5vh) 100%,0 100%);background:linear-gradient(135deg,color-mix(in srgb,var(--tc) 75%,#fff),color-mix(in srgb,var(--tc) 70%,#000))}
#cos-menu #career .mm .sc{display:flex;flex-direction:column;align-items:center;gap:.2vh;min-width:9vh}
#cos-menu #career .mm .sc .s{font-family:'BC';font-weight:900;font-style:italic;font-size:3.2vh;line-height:.9;font-variant-numeric:tabular-nums}
#cos-menu #career .mm .sc .s em{font-style:inherit;color:var(--muted);margin:0 .4vh}
#cos-menu #career .mm .sc .r{display:inline-flex;align-items:center;justify-content:center;height:2.2vh;min-width:2.2vh;padding:0 .4vh;border-radius:.3vh;font-family:'BC';font-weight:900;font-style:italic;font-size:1.6vh;color:#07112b;background:var(--rc)}
#cos-menu #career .mm.l .sc .r{color:#fff}
#cos-menu #career .mm .me-st{display:flex;flex-direction:column;align-items:flex-end;gap:.3vh}
#cos-menu #career .mm .me-st div{display:flex;align-items:center;gap:1vh;font-family:'BC';font-weight:900;font-style:italic;font-size:2.4vh;white-space:nowrap}
#cos-menu #career .mm .me-st div i{font-style:normal;font-weight:600;font-size:1.4vh;letter-spacing:.14em;color:var(--muted);margin-left:.3vh}
#cos-menu #career .mm .me-st span{font-family:'BC';font-weight:600;font-size:1.4vh;letter-spacing:.16em;color:#5d6f99}
#cos-menu #career .mm .me-st .mvp{display:inline-flex;align-items:center;height:2vh;padding:0 .6vh;border-radius:.3vh;background:var(--yellow);color:#07112b;font-size:1.3vh;letter-spacing:.12em}
#cos-menu #career .mh-empty{flex:1;display:grid;place-items:center;text-align:center;font-family:'BC';font-weight:700;font-style:italic;font-size:2.3vh;letter-spacing:.14em;color:var(--muted)}

/* COS-FIX (pakket 26, zelfde als pakket 24): de onderbalk ligt boven de pagina's - het onzichtbare versielabel ving de tik op de hint (opende What's New). Alleen ONLINE en CHAT blijven tikbaar. */
#cos-menu #career .foot{pointer-events:none}
#cos-menu #career .foot > *{pointer-events:auto}
#cos-menu #career .foot .ver{pointer-events:none}

/* ===== Pakket 27: TEAM HISTORY (teamhistorie.css, na historie.css) ===== */
/* Clash of Soccer – TEAM HISTORY onder het Team-scherm (swipe omhoog). Zelfde logica als pakket 24/26.
   Toevoegen achteraan de menu-CSS. Achtergrond blijft stil staan; alleen de inhoud schuift. */
#cos-menu #team .mh-pages{position:absolute;inset:0;overflow:hidden;z-index:1;pointer-events:none}
#cos-menu #team .mh-track{position:absolute;left:0;right:0;top:0;height:200%;transition:transform .62s cubic-bezier(.22,.9,.24,1);will-change:transform}
#cos-menu #team .mh-track.drag{transition:none}
#cos-menu #team .mh-page{position:absolute;left:0;right:0;height:50%;pointer-events:auto}
#cos-menu #team .mh-page.p1{top:0}
#cos-menu #team .mh-page.p2{top:50%}
#cos-menu #team.on-th .mh-track{transform:translateY(-50%)}
#cos-menu #team .topl,#cos-menu #team .foot,#cos-menu #team .topr{z-index:3}
#cos-menu #team .topr{transition:opacity .3s}
#cos-menu #team.on-th .topr{opacity:0;pointer-events:none}

/* hint onderaan pagina 1 */
#cos-menu #team .mh-hint{position:absolute;left:50%;bottom:max(3.4vh,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:4;display:flex;flex-direction:column;align-items:center;gap:.4vh;cursor:pointer;
  font-family:'BC';font-weight:700;font-style:italic;font-size:1.8vh;letter-spacing:.24em;color:#b9c7e8;transition:opacity .3s}
#cos-menu #team .mh-hint .chev{width:3.2vh;height:2vh;animation:mh-bob 1.6s ease-in-out infinite}
#cos-menu #team .mh-hint svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
#cos-menu #team .mh-hint .lbl{display:flex;align-items:center;gap:1vh;height:3.6vh;padding:0 1.4vh;border-radius:99px;background:rgba(6,14,38,.6);border:1px solid var(--line)}
#cos-menu #team .mh-hint .form{display:flex;gap:.3vh}
#cos-menu #team.on-th .mh-hint{opacity:0;pointer-events:none}
#cos-menu #team .foot .ver{opacity:0}
@keyframes mh-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-.6vh)}}

/* greep bovenaan pagina 2 */
#cos-menu #team .mh-up{position:absolute;left:50%;top:max(1.2vh,env(safe-area-inset-top));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.2vh;cursor:pointer;
  font-family:'BC';font-weight:700;font-style:italic;font-size:1.6vh;letter-spacing:.24em;color:#8fa3cf}
#cos-menu #team .mh-up i{width:6vh;height:.6vh;border-radius:1vh;background:rgba(255,255,255,.3)}
#cos-menu #team .mh-up svg{width:2.8vh;height:1.6vh;stroke:currentColor;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

/* pagina 2 layout */
#cos-menu #team .p2 .thead .tcol{background:var(--green);box-shadow:0 0 2vh var(--green)}
#cos-menu #team .mh-grid{position:absolute;left:max(4.5vw,env(safe-area-inset-left));right:max(4.5vw,env(safe-area-inset-right));top:17vh;bottom:16vh;display:grid;grid-template-columns:30vw 1fr;gap:1.4vh}
#cos-menu #team .mh-box{position:relative;display:flex;flex-direction:column;padding:2.4vh 2.6vh 2.6vh;min-height:0;
  clip-path:polygon(1.6vh 0,100% 0,calc(100% - 1.6vh) 100%,0 100%);background:linear-gradient(180deg,rgba(18,34,80,.86),rgba(9,19,48,.86));box-shadow:0 2vh 4vh rgba(0,0,0,.35)}
#cos-menu #team .mh-box::after{content:'';position:absolute;left:0;right:0;bottom:0;height:.9vh;background:var(--c,var(--blue));box-shadow:0 0 2vh var(--c,var(--blue))}
#cos-menu #team .mh-h{display:flex;align-items:flex-end;justify-content:space-between;gap:1vh}
#cos-menu #team .mh-h b{font-family:'BC';font-weight:900;font-style:italic;font-size:3.6vh;line-height:.9}
#cos-menu #team .mh-h span{font-family:'BC';font-weight:600;font-size:1.8vh;letter-spacing:.24em;color:var(--muted)}
#cos-menu #team .mh-h span em{font-style:normal;color:var(--text);font-weight:900;font-size:2.4vh;letter-spacing:.04em}

/* samenvatting */
#cos-menu #team .mh-sum{--c:var(--yellow)}
#cos-menu #team .mh-lab{font-family:'BC';font-weight:600;font-size:1.7vh;letter-spacing:.26em;color:var(--muted);margin-top:2vh}
#cos-menu #team .mh-form{display:flex;gap:.6vh;margin-top:.9vh}
#cos-menu #team .fp{width:3.6vh;height:3.6vh;display:grid;place-items:center;font-family:'BC';font-weight:900;font-style:italic;font-size:1.9vh;color:#07112b;
  clip-path:polygon(.5vh 0,100% 0,calc(100% - .5vh) 100%,0 100%)}
#cos-menu #team .fp.w{background:var(--green)}#cos-menu #team .fp.l{background:var(--red);color:#fff}#cos-menu #team .fp.d{background:#8fa3cf}
#cos-menu #team .fp.e{background:rgba(255,255,255,.06)}
#cos-menu #team .mh-hint .fp{width:2.2vh;height:2.2vh;font-size:1.3vh}
#cos-menu #team .mh-wdl{display:grid;grid-template-columns:repeat(3,1fr);gap:.8vh;margin-top:1vh}
#cos-menu #team .mh-wdl div{padding:1.2vh 1vh;text-align:center;background:rgba(255,255,255,.05);border:1px solid var(--line);clip-path:polygon(.7vh 0,100% 0,calc(100% - .7vh) 100%,0 100%)}
#cos-menu #team .mh-wdl b{display:block;font-family:'BC';font-weight:900;font-style:italic;font-size:4vh;line-height:.9}
#cos-menu #team .mh-wdl span{display:block;font-family:'BC';font-weight:600;font-size:1.5vh;letter-spacing:.22em;color:var(--muted);margin-top:.4vh}
#cos-menu #team .mh-wdl .w b{color:var(--green)}#cos-menu #team .mh-wdl .l b{color:#ff6a73}
#cos-menu #team .mh-bar{display:flex;height:.9vh;border-radius:1vh;overflow:hidden;margin-top:1.2vh;background:rgba(255,255,255,.06)}
#cos-menu #team .mh-bar i{display:block;height:100%}
#cos-menu #team .mh-kv{display:grid;grid-template-columns:1fr 1fr;gap:1.2vh 1.6vh;margin-top:2.2vh}
#cos-menu #team .mh-kv div{display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:.6vh}
#cos-menu #team .mh-kv span{font-family:'BC';font-weight:600;font-size:1.6vh;letter-spacing:.2em;color:var(--muted)}
#cos-menu #team .mh-kv b{font-family:'BC';font-weight:900;font-style:italic;font-size:2.8vh}
#cos-menu #team .mh-kv b.y{color:var(--yellow)}

/* lijst */
#cos-menu #team .mh-tabs{display:flex;gap:.6vh}
#cos-menu #team .mh-tabs span{height:3.2vh;padding:0 1.2vh;display:flex;align-items:center;cursor:pointer;font-family:'BC';font-weight:700;font-style:italic;font-size:1.6vh;letter-spacing:.16em;color:var(--muted);border:1px solid var(--line);border-radius:.5vh}
#cos-menu #team .mh-tabs span.on{background:var(--yellow);color:#07112b;border-color:transparent}
#cos-menu #team .mh-list{margin-top:1.4vh;display:flex;flex-direction:column;gap:.8vh;overflow:auto;min-height:0;scrollbar-width:none}
#cos-menu #team .mh-list::-webkit-scrollbar{display:none}
#cos-menu #team .mm{position:relative;display:grid;grid-template-columns:12vh 1fr auto 1fr 12vh;align-items:center;gap:1.2vh;min-height:7.2vh;padding:.6vh 1.4vh .6vh 1.6vh;
  background:rgba(255,255,255,.04);border:1px solid var(--line);clip-path:polygon(.9vh 0,100% 0,calc(100% - .9vh) 100%,0 100%)}
#cos-menu #team .mm::before{content:'';position:absolute;left:0;top:0;bottom:0;width:.7vh;background:var(--rc)}
#cos-menu #team .mm.w{--rc:var(--green)}#cos-menu #team .mm.l{--rc:var(--red)}#cos-menu #team .mm.d{--rc:#8fa3cf}
#cos-menu #team .mm .ty{display:flex;flex-direction:column;gap:.4vh}
#cos-menu #team .mm .ty b{white-space:nowrap;display:inline-flex;align-self:flex-start;height:2.6vh;align-items:center;padding:0 .8vh;border-radius:.4vh;font-family:'BC';font-weight:900;font-style:italic;font-size:1.5vh;letter-spacing:.12em}
#cos-menu #team .mm .ty b.tm{background:rgba(155,91,255,.2);color:#c3a0ff;border:1px solid rgba(155,91,255,.5)}
#cos-menu #team .mm .ty b.mk{background:rgba(255,210,63,.14);color:var(--yellow);border:1px solid rgba(255,210,63,.45)}
#cos-menu #team .mm .ty span{font-family:'BC';font-weight:600;font-size:1.4vh;letter-spacing:.16em;color:#5d6f99}
#cos-menu #team .mm .t{display:flex;align-items:center;gap:1vh;min-width:0}
#cos-menu #team .mm .t.hm{justify-content:flex-end;text-align:right}
#cos-menu #team .mm .t b{font-family:'BC';font-weight:900;font-style:italic;font-size:2.2vh;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cos-menu #team .mm .t.me b{color:var(--yellow)}
#cos-menu #team .mm .t.lose b{color:#8fa3cf}
#cos-menu #team .mm .cr{width:4vh;height:4vh;flex:none;display:grid;place-items:center;font-family:'BC';font-weight:900;font-style:italic;font-size:1.5vh;color:#fff;
  clip-path:polygon(.5vh 0,100% 0,calc(100% - .5vh) 100%,0 100%);background:linear-gradient(135deg,color-mix(in srgb,var(--tc) 75%,#fff),color-mix(in srgb,var(--tc) 70%,#000))}
#cos-menu #team .mm .sc{display:flex;flex-direction:column;align-items:center;gap:.2vh;min-width:9vh}
#cos-menu #team .mm .sc .s{font-family:'BC';font-weight:900;font-style:italic;font-size:3.2vh;line-height:.9;font-variant-numeric:tabular-nums}
#cos-menu #team .mm .sc .s em{font-style:inherit;color:var(--muted);margin:0 .4vh}
#cos-menu #team .mm .sc .r{display:inline-flex;align-items:center;justify-content:center;height:2.2vh;min-width:2.2vh;padding:0 .4vh;border-radius:.3vh;font-family:'BC';font-weight:900;font-style:italic;font-size:1.6vh;color:#07112b;background:var(--rc)}
#cos-menu #team .mm.l .sc .r{color:#fff}
#cos-menu #team .mm .me-st{display:flex;flex-direction:column;align-items:flex-end;gap:.3vh}
#cos-menu #team .mm .me-st div{display:flex;align-items:center;gap:1vh;font-family:'BC';font-weight:900;font-style:italic;font-size:2.4vh;white-space:nowrap}
#cos-menu #team .mm .me-st div i{font-style:normal;font-weight:600;font-size:1.4vh;letter-spacing:.14em;color:var(--muted);margin-left:.3vh}
#cos-menu #team .mm .me-st span{font-family:'BC';font-weight:600;font-size:1.4vh;letter-spacing:.16em;color:#5d6f99}
#cos-menu #team .mm .me-st .mvp{display:inline-flex;align-items:center;height:2vh;padding:0 .6vh;border-radius:.3vh;background:var(--yellow);color:#07112b;font-size:1.3vh;letter-spacing:.12em}
#cos-menu #team .mh-empty{flex:1;display:grid;place-items:center;text-align:center;font-family:'BC';font-weight:700;font-style:italic;font-size:2.3vh;letter-spacing:.14em;color:var(--muted)}

/* team-rijen: datum/format | thuis | stand | uit | doelpuntenmakers */
#cos-menu #team .mm{grid-template-columns:9vh 1fr auto 1fr 17vh}
#cos-menu #team .mm .ty span.d{font-family:'BC';font-weight:700;font-style:italic;font-size:1.6vh;letter-spacing:.12em;color:#b9c7e8}
#cos-menu #team .mm .sco{display:flex;flex-direction:column;align-items:flex-end;gap:.3vh;min-width:0}
#cos-menu #team .mm .sco div{font-family:'BC';font-weight:700;font-style:italic;font-size:1.7vh;letter-spacing:.04em;color:#d6e0f7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#cos-menu #team .mm .sco div b{color:var(--yellow);margin-left:.3vh}
#cos-menu #team .mm .sco span{font-family:'BC';font-weight:600;font-size:1.4vh;letter-spacing:.16em;color:#5d6f99}
/* topscorers */
#cos-menu #team .ts{display:flex;flex-direction:column;gap:.6vh;margin-top:.9vh}
#cos-menu #team .ts div{display:flex;align-items:center;gap:1vh;height:4.2vh;padding:0 1vh;background:rgba(255,255,255,.04);border:1px solid var(--line);clip-path:polygon(.6vh 0,100% 0,calc(100% - .6vh) 100%,0 100%)}
#cos-menu #team .ts div i{width:2.6vh;font-family:'BC';font-weight:900;font-style:italic;font-size:2vh;color:var(--muted);font-style:italic}
#cos-menu #team .ts div:first-child i{color:var(--yellow)}
#cos-menu #team .ts div span{flex:1;font-family:'BC';font-weight:900;font-style:italic;font-size:2.1vh;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cos-menu #team .ts div b{font-family:'BC';font-weight:900;font-style:italic;font-size:2.4vh;color:var(--yellow)}
#cos-menu #team .ts div b small{font-size:.6em;color:var(--muted);margin-left:.3vh;letter-spacing:.12em}
#cos-menu #team .mh-kv{grid-template-columns:repeat(4,1fr);margin-top:1.6vh}
#cos-menu #team .mh-kv div{flex-direction:column;align-items:flex-start;gap:.3vh}

/* COS-FIX (pakket 27, zelfde als 24/26): de onderbalk ligt boven de pagina's - het onzichtbare versielabel ving de tik op de hint (opende What's New). Alleen ONLINE en CHAT blijven tikbaar. */
#cos-menu #team .foot{pointer-events:none}
#cos-menu #team .foot > *{pointer-events:auto}
#cos-menu #team .foot .ver{pointer-events:none}

/* ===== Pakket 28: TEAM RANKING (ranking.css, na teammatches.css en matchcentre.css) ===== */
/* Clash of Soccer – TEAM RANKING rechts van Team Matches. Toevoegen ná teammatches.css en matchcentre.css. */

/* horizontale baan: [Team Matches | Ranking]. Achtergrond blijft stil. */
#cos-menu #tmatch .rk-wrap{position:absolute;inset:0;overflow:hidden;z-index:1;pointer-events:none}
#cos-menu #tmatch .rk-track{position:absolute;top:0;bottom:0;left:0;width:200%;transition:transform .62s cubic-bezier(.22,.9,.24,1);will-change:transform}
#cos-menu #tmatch .rk-track.drag{transition:none}
#cos-menu #tmatch .rk-pane{position:absolute;top:0;bottom:0;width:50%}
#cos-menu #tmatch .rk-pane.a{left:0}
#cos-menu #tmatch .rk-pane.b{left:50%;pointer-events:auto}
#cos-menu #tmatch.on-rk .rk-track{transform:translateX(-50%)}
#cos-menu #tmatch.on-rk .topr,#cos-menu #tmatch.on-rk .mc-hint{opacity:0;pointer-events:none}
#cos-menu #tmatch .topr,#cos-menu #tmatch .mc-hint{transition:opacity .3s}

/* zij-tabs */
#cos-menu #tmatch .rk-tab{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:4.6vh;padding:1.4vh 0 1.2vh;display:flex;flex-direction:column;align-items:center;gap:1vh;cursor:pointer;
  background:rgba(6,14,38,.72);border:1px solid var(--line);color:#b9c7e8;font-family:'BC';font-weight:700;font-style:italic;letter-spacing:.24em}
#cos-menu #tmatch .rk-tab.go-r{right:max(.5vw,env(safe-area-inset-right));border-radius:1.2vh 0 0 1.2vh;border-right:0}
#cos-menu #tmatch .rk-tab.go-l{left:max(.5vw,env(safe-area-inset-left));border-radius:0 1.2vh 1.2vh 0;border-left:0}
#cos-menu #tmatch .rk-tab .lb{writing-mode:vertical-rl;font-size:1.6vh}
#cos-menu #tmatch .rk-tab.go-l .lb{transform:rotate(180deg)}
#cos-menu #tmatch .rk-tab .pos{font-weight:900;font-size:1.9vh;letter-spacing:0;color:var(--yellow)}
#cos-menu #tmatch .rk-tab svg{width:1.4vh;height:2.2vh;stroke:currentColor;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
#cos-menu #tmatch .rk-tab.go-r svg{animation:rk-nudge 1.6s ease-in-out infinite}
@keyframes rk-nudge{50%{transform:translateX(.5vh)}}

/* pagina ranking: kop */
#cos-menu #tmatch .rk-pane.b .thd .bar{background:var(--yellow);box-shadow:0 0 2vh var(--yellow)}
#cos-menu #tmatch .rk-info-btn{position:absolute;right:max(4.5vw,env(safe-area-inset-right));top:max(5.4vh,env(safe-area-inset-top));display:flex;align-items:center;gap:1vh;height:4.6vh;padding:0 1.6vh 0 .8vh;cursor:pointer;
  background:rgba(6,14,38,.6);border:1px solid var(--line);border-radius:99px;font-family:'BC';font-weight:700;font-style:italic;font-size:1.7vh;letter-spacing:.2em;color:#b9c7e8}
#cos-menu #tmatch .rk-info-btn b{width:3vh;height:3vh;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:#fff;font-size:1.9vh;letter-spacing:0}
#cos-menu #tmatch .rk-pane.b .grid{grid-template-columns:34fr 66fr}
#cos-menu #tmatch .rk-me{--c:var(--yellow)}
#cos-menu #tmatch .rk-board{--c:var(--blue)}

/* tier-chip */
#cos-menu #tmatch .rk-tier{display:inline-flex;align-items:center;gap:.6vh;height:3vh;padding:0 1.1vh 0 .7vh;border-radius:.5vh;font-family:'BC';font-weight:900;font-style:italic;font-size:1.7vh;letter-spacing:.14em;
  color:var(--tc);background:color-mix(in srgb,var(--tc) 14%,transparent);border:1px solid color-mix(in srgb,var(--tc) 55%,transparent)}
#cos-menu #tmatch .rk-tier svg{width:1.7vh;height:1.9vh;fill:var(--tc)}

/* eigen team */
#cos-menu #tmatch .rk-id{display:flex;align-items:center;gap:1.4vh;margin-top:1.6vh}
#cos-menu #tmatch .rk-id .cr{width:6vh;height:6vh;font-size:2.1vh}
#cos-menu #tmatch .rk-id div{min-width:0}
#cos-menu #tmatch .rk-id b{display:block;font-family:'BC';font-weight:900;font-style:italic;font-size:3vh;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cos-menu #tmatch .rk-id span{font-family:'BC';font-weight:600;font-size:1.6vh;letter-spacing:.18em;color:var(--muted)}
#cos-menu #tmatch .rk-big{display:grid;grid-template-columns:auto 1fr;gap:2.4vh;margin-top:1.4vh;padding:1vh 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
#cos-menu #tmatch .rk-big div{display:flex;flex-direction:column;min-width:0}
#cos-menu #tmatch .rk-big span{font-family:'BC';font-weight:600;font-size:1.5vh;letter-spacing:.22em;color:var(--muted)}
#cos-menu #tmatch .rk-big b{font-family:'BC';font-weight:900;font-style:italic;font-size:5.4vh;line-height:.95;font-variant-numeric:tabular-nums}
#cos-menu #tmatch .rk-big b.y{color:var(--yellow);text-shadow:0 0 2.4vh rgba(255,210,63,.35)}
#cos-menu #tmatch .rk-big b.mute{color:#5d6f99}
#cos-menu #tmatch .rk-big .dl{font-size:1.8vh}
#cos-menu #tmatch .dl{font-family:'BC';font-weight:900;font-style:italic;font-size:1.6vh;letter-spacing:.06em;color:#5d6f99}
#cos-menu #tmatch .dl.up{color:var(--green)}#cos-menu #tmatch .dl.dn{color:var(--red)}
#cos-menu #tmatch .rk-lab{display:flex;align-items:baseline;gap:.8vh;margin-top:1.4vh;font-family:'BC';font-weight:600;font-size:1.5vh;letter-spacing:.22em;color:var(--muted)}
#cos-menu #tmatch .rk-lab em{font-style:italic;font-weight:900;font-size:1.8vh;letter-spacing:.12em;color:var(--text)}
#cos-menu #tmatch .rk-lab small{margin-left:auto;font-size:1.5vh;color:#b9c7e8;letter-spacing:.14em}
#cos-menu #tmatch .rk-prog{height:1vh;margin-top:.7vh;background:rgba(255,255,255,.08);border-radius:1vh;overflow:hidden}
#cos-menu #tmatch .rk-prog i{display:block;height:100%;background:var(--tc);box-shadow:0 0 1.4vh var(--tc);border-radius:1vh}
#cos-menu #tmatch .rk-wdl{display:grid;grid-template-columns:repeat(3,5.6vh) 1fr;gap:.7vh;margin-top:auto;padding-top:1.2vh}
#cos-menu #tmatch .rk-wdl>div{display:flex;flex-direction:column;align-items:center;justify-content:center;height:5.6vh;background:rgba(255,255,255,.04);border:1px solid var(--line)}
#cos-menu #tmatch .rk-wdl b{font-family:'BC';font-weight:900;font-style:italic;font-size:2.6vh;line-height:1}
#cos-menu #tmatch .rk-wdl span{font-family:'BC';font-weight:700;font-size:1.3vh;letter-spacing:.2em;color:var(--muted)}
#cos-menu #tmatch .rk-wdl .w b{color:var(--green)}#cos-menu #tmatch .rk-wdl .l b{color:var(--red)}
#cos-menu #tmatch .rk-wdl .f{gap:.6vh}
/* placement */
#cos-menu #tmatch .rk-slots{display:flex;gap:.7vh;margin-top:.8vh}
#cos-menu #tmatch .rk-slots i{flex:1;height:3.6vh;border:1px dashed rgba(255,255,255,.22);border-radius:.4vh}
#cos-menu #tmatch .rk-slots i.w{background:var(--green);border:0}#cos-menu #tmatch .rk-slots i.l{background:var(--red);border:0}#cos-menu #tmatch .rk-slots i.d{background:#8fa3cf;border:0}
#cos-menu #tmatch .rk-slots i.nx{border:1px solid var(--yellow);box-shadow:0 0 1.2vh rgba(255,210,63,.4) inset}
#cos-menu #tmatch .rk-note{margin-top:auto;font-family:'Barlow';font-weight:500;font-size:1.7vh;line-height:1.35;color:#b9c7e8}

/* vorm-blokjes */
#cos-menu #tmatch .rk-form{display:flex;gap:.4vh}
#cos-menu #tmatch .rk-form i{width:1.5vh;height:1.5vh;border-radius:.3vh;background:rgba(255,255,255,.1)}
#cos-menu #tmatch .rk-form i.w{background:var(--green)}#cos-menu #tmatch .rk-form i.l{background:var(--red)}#cos-menu #tmatch .rk-form i.d{background:#8fa3cf}

/* leaderboard */
#cos-menu #tmatch .rk-cols,#cos-menu #tmatch .rr{display:grid;grid-template-columns:5vh 5vh 1fr 10vh 12vh;align-items:center;gap:1.2vh}
#cos-menu #tmatch .rk-cols{margin-top:1.2vh;padding:0 1.4vh;font-family:'BC';font-weight:700;font-size:1.3vh;letter-spacing:.24em;color:#5d6f99}
#cos-menu #tmatch .rk-cols span:nth-child(2){grid-column:2/4}
#cos-menu #tmatch .rk-cols span:last-child{text-align:right}
#cos-menu #tmatch .rk-list{margin-top:.6vh;gap:.6vh}
#cos-menu #tmatch .rr{position:relative;min-height:6.4vh;padding:0 1.4vh;cursor:pointer;background:rgba(255,255,255,.04);border:1px solid var(--line);clip-path:polygon(.9vh 0,100% 0,calc(100% - .9vh) 100%,0 100%)}
#cos-menu #tmatch .rr .rk{font-family:'BC';font-weight:900;font-style:italic;font-size:2.8vh;text-align:center;color:#b9c7e8;font-variant-numeric:tabular-nums}
#cos-menu #tmatch .rr.top1 .rk{color:#ffd23f;text-shadow:0 0 1.6vh rgba(255,210,63,.5)}
#cos-menu #tmatch .rr.top2 .rk{color:#dfe7fb}
#cos-menu #tmatch .rr.top3 .rk{color:#e09a5f}
#cos-menu #tmatch .rr .cr{width:4.6vh;height:4.6vh;font-size:1.6vh;box-shadow:0 0 0 .25vh var(--tc) inset}
#cos-menu #tmatch .rr .nm{min-width:0;display:flex;flex-direction:column;gap:.2vh}
#cos-menu #tmatch .rr .nm b{font-family:'BC';font-weight:900;font-style:italic;font-size:2.4vh;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cos-menu #tmatch .rr .nm span{font-family:'BC';font-weight:600;font-size:1.4vh;letter-spacing:.16em;color:var(--muted);white-space:nowrap}
#cos-menu #tmatch .rr .nm em{font-style:italic;font-weight:900}
#cos-menu #tmatch .rr .pt{display:flex;flex-direction:column;align-items:flex-end;gap:.2vh}
#cos-menu #tmatch .rr .pt b{font-family:'BC';font-weight:900;font-style:italic;font-size:2.7vh;line-height:1;font-variant-numeric:tabular-nums}
#cos-menu #tmatch .rr.mine{background:rgba(255,210,63,.08);border-color:rgba(255,210,63,.45)}
#cos-menu #tmatch .rr.mine::before{content:'';position:absolute;left:0;top:0;bottom:0;width:.7vh;background:var(--yellow);box-shadow:0 0 1.4vh var(--yellow)}
#cos-menu #tmatch .rr.mine .nm b{color:var(--yellow)}

/* uitleg-venster */
#cos-menu #tmatch .rk-info{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background:rgba(3,8,24,.62);opacity:0;pointer-events:none;transition:opacity .25s}
#cos-menu #tmatch.rk-info-on .rk-info{opacity:1;pointer-events:auto}
#cos-menu #tmatch .rk-info .box{width:min(92vw,116vh);--c:var(--yellow);background:linear-gradient(160deg,rgba(18,34,82,.97),rgba(8,16,44,.97));border:1px solid var(--line)}
#cos-menu #tmatch .rk-info .x{cursor:pointer;font-size:2.6vh;color:var(--muted);letter-spacing:0}
#cos-menu #tmatch .rk-rules{display:grid;grid-template-columns:1fr 1fr;gap:.8vh 2.4vh;margin-top:1.8vh}
#cos-menu #tmatch .rk-rules div{display:flex;align-items:center;gap:1.2vh}
#cos-menu #tmatch .rk-rules b{flex:none;width:6.4vh;height:4.6vh;display:grid;place-items:center;font-family:'BC';font-weight:900;font-style:italic;font-size:2.2vh;color:var(--yellow);background:rgba(255,210,63,.1);border:1px solid rgba(255,210,63,.35);clip-path:polygon(.7vh 0,100% 0,calc(100% - .7vh) 100%,0 100%)}
#cos-menu #tmatch .rk-rules span{font-family:'Barlow';font-weight:500;font-size:1.85vh;line-height:1.3;color:#d6e0f7}
#cos-menu #tmatch .rk-rules em{font-style:normal;font-weight:700;color:#fff}
#cos-menu #tmatch .rk-ladder{display:grid;grid-template-columns:repeat(5,1fr);gap:.8vh;margin-top:2vh}
#cos-menu #tmatch .rk-ladder div{display:flex;flex-direction:column;align-items:center;gap:.3vh;padding:1vh 0;background:color-mix(in srgb,var(--tc) 9%,transparent);border-bottom:.4vh solid var(--tc)}
#cos-menu #tmatch .rk-ladder svg{width:3vh;height:3.3vh;fill:var(--tc);filter:drop-shadow(0 0 1vh color-mix(in srgb,var(--tc) 60%,transparent))}
#cos-menu #tmatch .rk-ladder b{font-family:'BC';font-weight:900;font-style:italic;font-size:1.9vh;letter-spacing:.1em;color:var(--tc)}
#cos-menu #tmatch .rk-ladder span{font-family:'BC';font-weight:700;font-size:1.5vh;letter-spacing:.14em;color:var(--muted)}
#cos-menu #tmatch .rk-kv{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:.7vh;margin-top:1.6vh}
#cos-menu #tmatch .rk-kv div{display:flex;flex-direction:column;gap:.3vh;padding:.8vh 1vh;background:rgba(255,255,255,.04);border:1px solid var(--line);min-width:0}
#cos-menu #tmatch .rk-kv span{font-family:'BC';font-weight:700;font-size:1.3vh;letter-spacing:.2em;color:var(--muted);white-space:nowrap}
#cos-menu #tmatch .rk-kv b{font-family:'BC';font-weight:900;font-style:italic;font-size:2.5vh;line-height:1;white-space:nowrap}
#cos-menu #tmatch .rk-kv b small{font-size:.62em;color:var(--muted);letter-spacing:.12em}
#cos-menu #tmatch.rk-drag .topr,#cos-menu #tmatch.rk-drag .mc-hint{opacity:0}

/* COS-FIX (pakket 28): naar rechts vegen (terug van TEAM RANKING) activeerde in Chrome/Android het terug-gebaar
   van de browser en verliet de app. Geen horizontaal "overscrollen" meer op de menupagina. */
html,body{overscroll-behavior-x:none}

/* COS-FIX (pakket 28, user-verzoek): tier naast de Club Rating rechtsboven op het Team-scherm */
#cos-menu #team .topr .chip .v .cos-tier{width:3.4vh;height:3.8vh;margin-right:1vh;vertical-align:-.5vh;fill:var(--tc);filter:drop-shadow(0 0 1vh var(--tc))}

/* COS-FIX (pakket 28): op een iPhone in landscape (veilige zone naast de notch) viel het RANKING-tabje over het vak:
   het vak begint op max(4.5vw, veilige zone) en het tabje stond óók op de veilige zone. Nu direct naast het vak
   (5.6vh = tabje + kleine marge); zonder veilige zone blijft het op .5vw zoals in het ontwerp. Geldt ook voor #team (CSS wordt daar overgenomen). */
#cos-menu #tmatch .rk-tab.go-r{right:max(.5vw,calc(env(safe-area-inset-right) - 5.6vh))}
#cos-menu #tmatch .rk-tab.go-l{left:max(.5vw,calc(env(safe-area-inset-left) - 5.6vh))}
/* COS-FIX (user-verzoek): het tabje staat nu los naast het vak, dus rondom een rand en ronde hoeken (was half, tegen de schermrand aan) */
#cos-menu #tmatch .rk-tab.go-r,#cos-menu #tmatch .rk-tab.go-l{border-radius:1.2vh;border:1px solid var(--line)}
/* COS-FIX (user-verzoek): HOW CLUB RATING WORKS-venster en de HOW IT WORKS-knop groter (venster ~1,3x, gecentreerd) */
#cos-menu #tmatch .rk-info .box{zoom:1.3;width:min(70vw,116vh)}
#cos-menu #tmatch .rk-info-btn{height:6.2vh;padding:0 2.2vh 0 1.1vh;gap:1.4vh;font-size:2.3vh}
#cos-menu #tmatch .rk-info-btn b{width:4.2vh;height:4.2vh;font-size:2.6vh}