/* Ofis: Big Three ve Quiz (office-ui.js). Tasarım alanı --dw × --dh; 1 birim = 100cqw / --dw. */
.ob-modal{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;background:#050b16b8;padding:5vh 3vw 3vh}
.ob-wrap{position:relative;width:min(100%,calc((100dvh - 9vh) * var(--dw) / var(--dh)));aspect-ratio:var(--dw)/var(--dh);container-type:inline-size;--k:calc(100cqw / var(--dw));font-family:Arial,sans-serif;color:#fff}
.ob-wrap>*{position:absolute}
.ob-wrap button{background:none;border:0;padding:0;cursor:pointer;color:inherit;font:inherit}
.ob-wrap button:disabled{cursor:default}
.ob-wrap img{display:block;pointer-events:none}
.ob-fill{inset:calc(30*var(--k));border-radius:calc(18*var(--k));background:radial-gradient(ellipse at 50% 18%,#0e4a8f,#08305f 70%);z-index:0}
.ob-frame{inset:0;width:100%;height:100%;z-index:1}
.ob-frame~*:not(.ob-fill){z-index:2}
.ob-title img,.ob-close img,.ob-btn img,.ob-pill img,.ob-timer img,.ob-card-bg{position:absolute;inset:0;width:100%;height:100%}
.ob-title{display:grid;place-items:center;z-index:3!important}
.ob-title span{position:relative;font:italic 900 calc(52*var(--k))/1 'Barlow Condensed',Arial;letter-spacing:calc(1*var(--k));color:#ff9416;-webkit-text-stroke:calc(2*var(--k)) #7a2e00;paint-order:stroke fill;text-shadow:0 calc(3*var(--k)) 0 #7a2e00}
.ob-close{z-index:3!important}
.ob-close:hover img,.ob-btn:not(:disabled):hover img,.ob-team:hover{filter:brightness(1.12)}
.ob-btn{display:grid;place-items:center}
.ob-btn span{position:relative;font:900 calc(28*var(--k)) Arial;text-shadow:0 calc(2*var(--k)) calc(3*var(--k)) #0009;white-space:nowrap}
.ob-btn:disabled img{filter:grayscale(.85) brightness(.7)}
.ob-btn:disabled span{color:#c9d6e6}
.ob-chip{display:inline-block;font:900 calc(15*var(--k)) Arial;font-style:normal;border-radius:calc(8*var(--k));padding:calc(3*var(--k)) calc(9*var(--k));vertical-align:middle;white-space:nowrap}
.ob-chip.on{background:linear-gradient(#7dff7d,#2fb84a);color:#083a12}
.ob-chip.ready{background:linear-gradient(#ffe08a,#ffb347);color:#4a2400}
.ob-chip.off{background:linear-gradient(#ff9b9b,#d94141);color:#fff}
/* Big Three */
.ob-sub{display:flex;align-items:center;font:900 calc(22*var(--k)) Arial;letter-spacing:calc(2*var(--k));color:#ffd166;text-shadow:0 1px 2px #0009}
.ob-teams{overflow-y:auto;display:flex;flex-direction:column;gap:calc(8*var(--k));padding-right:calc(8*var(--k))}
.ob-teams::-webkit-scrollbar{width:calc(10*var(--k))}.ob-teams::-webkit-scrollbar-thumb{background:#5aa9f0;border-radius:calc(6*var(--k))}
.ob-team{position:relative!important;flex:none;display:grid!important;grid-template-columns:calc(70*var(--k)) 1fr auto;align-items:center;gap:calc(10*var(--k));height:calc(66*var(--k));padding:0 calc(12*var(--k))!important;border-radius:calc(12*var(--k))!important;background:linear-gradient(#1b64b8,#0f4a93)!important;border:calc(2*var(--k)) solid #5aa9f0!important;box-shadow:inset 0 calc(2*var(--k)) 0 #ffffff26;text-align:left}
.ob-team.selected{border-color:#ffd166!important;background:linear-gradient(#ffb347,#e67a0f)!important}
.ob-code{display:grid;place-items:center;height:calc(46*var(--k));border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffb066,#f07a14 60%,#b4540c);border:calc(2*var(--k)) solid #fff;font:900 calc(17*var(--k)) Arial;color:#fff;text-shadow:0 1px 1px #0008}
.ob-team.selected .ob-code{background:radial-gradient(circle at 35% 30%,#6ec6ff,#1b6fd0 60%,#0b3d7c)}
.ob-team-name{display:flex;flex-direction:column;min-width:0}
.ob-team-name b{font:900 calc(21*var(--k)) Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 2px #0008}
.ob-team-name small{font:700 calc(14*var(--k)) Arial;color:#cfe6ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ob-team.selected .ob-team-name small{color:#fff3dd}
.ob-note{display:flex;align-items:center;padding:0 calc(22*var(--k));border-radius:calc(14*var(--k));background:#0a2d58;border:calc(2*var(--k)) solid #5aa9f0;border-left:calc(8*var(--k)) solid #ffb347;font:700 calc(19*var(--k))/1.45 Arial;color:#dbe9ff}
.ob-note b{color:#ffd166}
.ob-team-title{display:flex;align-items:center;justify-content:center;gap:calc(14*var(--k));font:italic 900 calc(40*var(--k)) 'Barlow Condensed',Arial;color:#fff;text-shadow:0 calc(3*var(--k)) 0 #0b3d7c}
.ob-card{display:flex;flex-direction:column;align-items:center}
.ob-card-face{position:relative;margin-top:calc(14*var(--k));width:calc(190*var(--k));height:calc(170*var(--k));overflow:hidden;border-radius:calc(12*var(--k))}
.ob-card-face img{width:100%;height:100%;object-fit:cover;object-position:top}
.ob-card-name{position:relative;margin-top:calc(22*var(--k));width:90%;text-align:center;font:900 calc(20*var(--k)) Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ob-card-pos{position:relative;margin-top:calc(20*var(--k));font:800 calc(15*var(--k)) Arial;color:#cfe6ff}
.ob-card .ob-chip{position:relative;margin-top:calc(10*var(--k))}
.ob-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(14*var(--k));border-radius:calc(18*var(--k));border:calc(3*var(--k)) dashed #5aa9f0;font:900 calc(30*var(--k)) Arial;color:#cfe6ff;text-align:center}
.ob-empty span{font-size:calc(70*var(--k))}
.ob-empty small{font:700 calc(18*var(--k)) Arial;color:#9fcbf5}
/* Quiz */
.ob-pill,.ob-timer{display:grid;place-items:center}
.ob-pill span{position:relative;font:900 calc(24*var(--k)) Arial;color:#cfe6ff}
.ob-pill b{color:#ffd166}
.ob-timer span{position:relative;font:900 calc(36*var(--k)) Arial;color:#fff;text-shadow:0 calc(2*var(--k)) calc(2*var(--k)) #7a3100}
.ob-timer.low img{filter:hue-rotate(-25deg) saturate(1.6)}
.ob-timer.low span{animation:ob-pulse .5s ease-in-out infinite alternate}
@keyframes ob-pulse{to{transform:scale(1.15)}}
.ob-question{display:flex;align-items:center;justify-content:center;text-align:center;padding:0 calc(40*var(--k));border-radius:calc(18*var(--k));background:linear-gradient(#fff7e2,#ffe3a6);border:calc(4*var(--k)) solid #fff;box-shadow:0 0 0 calc(3*var(--k)) #e98a1a,0 calc(8*var(--k)) calc(16*var(--k)) #0006;font:900 calc(34*var(--k))/1.3 Arial;color:#5a2a00}
.ob-answer span{display:flex;align-items:center;gap:calc(18*var(--k));font-size:calc(30*var(--k))}
.ob-answer i{display:grid;place-items:center;width:calc(52*var(--k));height:calc(52*var(--k));border-radius:50%;background:#fff;color:#1a5fb4;font:900 calc(26*var(--k)) Arial;font-style:normal;text-shadow:none}
.ob-answer.correct img{filter:hue-rotate(-95deg) saturate(1.3) brightness(1.05)!important}
.ob-answer.correct i{color:#1d8a33}
.ob-answer.wrong img{filter:hue-rotate(150deg) saturate(1.6)!important}
.ob-answer.wrong i{color:#c62828}
.ob-answer:disabled:not(.correct):not(.wrong) img{filter:grayscale(.6) brightness(.75)}
.ob-result{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(12*var(--k));border-radius:calc(22*var(--k));background:linear-gradient(#fff7e2,#ffe3a6);border:calc(4*var(--k)) solid #fff;box-shadow:0 0 0 calc(3*var(--k)) #e98a1a}
.ob-result small{font:900 calc(24*var(--k)) Arial;letter-spacing:calc(2*var(--k));color:#9a4a00}
.ob-result b{font:italic 900 calc(130*var(--k))/1 'Barlow Condensed',Arial;color:#ff9416;-webkit-text-stroke:calc(3*var(--k)) #7a2e00;paint-order:stroke fill;text-shadow:0 calc(5*var(--k)) 0 #7a2e00}
.ob-result p{margin:0;font:900 calc(38*var(--k)) Arial;color:#1d8a33}
/* düzeltmeler */
.ob-note{display:block;padding:calc(16*var(--k)) calc(24*var(--k))}
.ob-card-pos{font-size:calc(13*var(--k));margin-top:calc(22*var(--k));white-space:nowrap}
.ob-card .ob-chip{margin-top:calc(28*var(--k))}
.ob-btn.ob-long span{font-size:calc(22*var(--k))}
.ob-answer.correct,.ob-answer.wrong{opacity:1!important}
.ob-answer.correct span,.ob-answer.wrong span{color:#fff}
.ob-answer:disabled{opacity:1}
.ob-card-pos{margin-top:calc(34*var(--k));color:#fff}
/* kart içi: scout/card görseli (açık alan %0–74, koyu bant %76–96) */
.ob-card>*{position:absolute!important;margin:0!important;left:50%;transform:translateX(-50%)}
.ob-card>.ob-card-bg{left:0;transform:none}
.ob-card-face{top:4%;width:82%;height:58%}
.ob-card-name{top:64%;width:92%}
.ob-card-pos{top:83%;transform:translate(-50%,-50%)}
.ob-card .ob-chip{top:103%}
/* 4–5 kartlık havuzlar: kart içi yazılar kart genişliğiyle küçülür (--cw); X kartında turuncu rozet */
.ob-card-name{font-size:calc(20*var(--k)*var(--cw,1))}
.ob-card-pos{font-size:calc(13*var(--k)*var(--cw,1))}
.ob-card .ob-chip{font-size:calc(15*var(--k)*var(--cw,1))}
.ob-card>.ob-x{position:absolute!important;left:auto;right:-4%;top:-3%;transform:none;z-index:2;display:grid;place-items:center;width:calc(48*var(--k)*var(--cw,1));height:calc(48*var(--k)*var(--cw,1));border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffb066,#f07a14 60%,#b4540c);border:calc(3*var(--k)) solid #fff;font:italic 900 calc(26*var(--k)*var(--cw,1)) Arial;color:#fff;text-shadow:0 1px 2px #7a2e00;box-shadow:0 calc(3*var(--k)) calc(6*var(--k)) #0008}
.ob-card-x .ob-card-bg{filter:drop-shadow(0 0 calc(8*var(--k)) #ffb347)}
.ob-team-title .ob-count{font:900 calc(16*var(--k)) Arial;font-style:normal}
/* Big Three liste: daha büyük satırlar */
.ob-teams{gap:calc(10*var(--k))}
.ob-team{height:calc(82*var(--k));grid-template-columns:calc(84*var(--k)) 1fr auto;gap:calc(12*var(--k))}
.ob-code{height:calc(58*var(--k));font-size:calc(20*var(--k))}
.ob-team-name b{font-size:calc(26*var(--k))}
.ob-team-name small{font-size:calc(16*var(--k))}
.ob-team .ob-chip{font-size:calc(17*var(--k))}
.ob-note{font-size:calc(18*var(--k));line-height:1.4;padding:calc(12*var(--k)) calc(22*var(--k))}
.ob-pickable{cursor:pointer}.ob-pickable:hover{filter:brightness(1.12)}.ob-picked{outline:calc(4*var(--k)) solid #ffb02e;outline-offset:calc(2*var(--k));border-radius:calc(14*var(--k));box-shadow:0 0 calc(22*var(--k)) #ffb02eaa}