/* TUG OF WAR */
.tw-page .gk-stage{ max-width:1400px; }
#tw-game{ display:flex; flex-direction:column; gap:10px; min-height:0; flex:1; }
#tw-game.gk-hidden{ display:none; }
.tw-top{ display:flex; align-items:center; gap:10px; }
.tw-top .gk-grow{ flex:1; }
.tw-chip{ font-family:'Fredoka',sans-serif; font-weight:700; font-size:22px; padding:6px 16px; border-radius:16px; color:#fff; }
.tw-chip.r{ background:#DC2626; box-shadow:0 4px 0 #7F1D1D; } .tw-chip.b{ background:#2563EB; box-shadow:0 4px 0 #1E3A8A; }
.tw-chip b{ background:rgba(255,255,255,.25); border-radius:10px; padding:0 10px; margin-left:6px; }
#tw-timechip{ font-size:24px; } #tw-timechip.hot{ background:#DC2626; animation:gkPulse .5s infinite alternate; }

/* arena */
.tw-arena{ position:relative; height:clamp(120px,24vh,200px); border-radius:22px; overflow:hidden;
  background:linear-gradient(#7DD3FC 0 55%, #4ADE80 55% 100%); box-shadow:inset 0 -8px 0 rgba(0,0,0,.12), 0 10px 26px rgba(0,0,0,.35); }
.tw-arena::before{ content:''; position:absolute; left:50%; top:46%; bottom:6%; width:6px; margin-left:-3px; background:repeating-linear-gradient(#fff 0 10px, transparent 10px 18px); opacity:.9; }
.tw-arena::after{ content:''; position:absolute; left:0; right:0; top:55%; height:20%; background:repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 40px, transparent 40px 80px); }
.tw-cloud{ position:absolute; top:10%; font-size:38px; opacity:.85; animation:twCloud 30s linear infinite; }
@keyframes twCloud{ from{ transform:translateX(-120px); } to{ transform:translateX(110vw); } }
.tw-rope{ position:absolute; left:16%; right:16%; top:52%; height:100%; transition:transform .45s cubic-bezier(.34,1.56,.64,1); z-index:2; }
.tw-line{ position:absolute; left:0; right:0; top:0; height:12px; margin-top:-6px; border-radius:6px;
  background:repeating-linear-gradient(60deg, #A16207 0 8px, #CA8A04 8px 16px); box-shadow:0 3px 0 rgba(0,0,0,.25); }
.tw-knot{ position:absolute; left:50%; top:0; width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%; background:#FDE047; border:4px solid #fff; box-shadow:0 3px 8px rgba(0,0,0,.35); }
.tw-knot::after{ content:''; position:absolute; left:50%; top:22px; width:4px; height:30px; margin-left:-2px; background:#fff; }
.tw-team{ position:absolute; top:-58px; display:flex; gap:2px; font-size:clamp(38px,6vh,56px); line-height:1; }
.tw-team.t0{ left:0; } .tw-team.t1{ right:0; }
.tw-kid{ display:inline-block; filter:drop-shadow(0 4px 2px rgba(0,0,0,.25)); }
.tw-team.t0 .tw-kid{ transform:rotate(-12deg); } .tw-team.t1 .tw-kid{ transform:rotate(12deg); }
.tw-team.pull .tw-kid{ animation:twPull .5s ease; }
.tw-team.t1.pull .tw-kid{ animation-name:twPullR; }
@keyframes twPull{ 40%{ transform:rotate(-26deg) translateX(-8px); } }
@keyframes twPullR{ 40%{ transform:rotate(26deg) translateX(8px); } }
.tw-team.won .tw-kid{ animation:twJump .5s ease infinite alternate; }
@keyframes twJump{ to{ transform:translateY(-14px) rotate(0); } }
.tw-team.fell .tw-kid{ transform:rotate(90deg) translateX(30px); transition:transform .5s; }
.tw-flag{ position:absolute; top:8%; font-family:'Fredoka',sans-serif; font-weight:700; font-size:16px; color:#fff; padding:4px 12px; border-radius:12px; opacity:.9; }
.tw-flag.f0{ left:2%; background:#DC2626; } .tw-flag.f1{ right:2%; background:#2563EB; }
.tw-arena.lead0 .tw-flag.f0, .tw-arena.lead1 .tw-flag.f1{ animation:gkPulse .6s infinite alternate; }

/* iki taraf */
.tw-sides{ flex:1; min-height:0; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.tw-side{ display:flex; flex-direction:column; gap:10px; padding:14px; border-radius:22px; min-height:0; border:4px solid transparent; transition:background .2s, border-color .2s; }
.tw-side.s0{ background:linear-gradient(160deg, rgba(220,38,38,.35), rgba(127,29,29,.35)); border-color:#EF4444; }
.tw-side.s1{ background:linear-gradient(160deg, rgba(37,99,235,.35), rgba(30,58,138,.35)); border-color:#3B82F6; }
.tw-side.ok{ background:rgba(34,197,94,.35); }
.tw-side.bad{ animation:twShake .4s; }
@keyframes twShake{ 25%{ transform:translateX(-8px); } 75%{ transform:translateX(8px); } }
.tw-see{ flex:1; min-height:70px; display:flex; align-items:center; justify-content:center; background:#fff; border-radius:16px; overflow:hidden; }
.tw-see img{ max-width:100%; max-height:100%; object-fit:contain; }
.tw-emoji{ font-size:clamp(48px,9vh,90px); }
.tw-q{ font-family:'Fredoka',sans-serif; font-weight:700; font-size:clamp(20px,3.2vh,30px); color:#fff; text-align:center; line-height:1.2; white-space:pre-line; }
.tw-q.pop{ animation:gkPop .35s ease; }
.tw-opts{ display:flex; flex-direction:column; gap:8px; }
.tw-opt{ min-height:clamp(46px,7vh,64px); border-radius:16px; border:0; cursor:pointer; touch-action:manipulation;
  font-family:'Fredoka',sans-serif; font-weight:700; font-size:clamp(18px,2.9vh,26px); color:#1B1740; background:#fff; border-bottom:5px solid #CBD5E1; transition:transform .1s; }
.tw-opt:active{ transform:translateY(3px); }
.tw-opt.right{ background:#22C55E; color:#fff; border-bottom-color:#15803D; }
.tw-opt.wrong{ background:#EF4444; color:#fff; border-bottom-color:#991B1B; }
.tw-final{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap; font-weight:800; font-size:20px; }
.tw-final b{ color:var(--gk-gold); font-size:26px; }
.tw-keys{ text-align:center; color:var(--gk-muted); font-size:13px; font-weight:700; }
@media (max-width:700px){
  .tw-sides{ gap:8px; } .tw-side{ padding:8px; gap:6px; }
  .tw-opt{ font-size:16px; min-height:44px; }
  .tw-q{ font-size:17px; }
  .tw-keys{ display:none; }
}
@media (max-width:700px){ .tw-chip{ font-size:14px; padding:4px 8px; } .tw-chip b{ padding:0 6px; margin-left:3px; } #tw-timechip{ font-size:16px; } .tw-team{ font-size:30px; top:-40px; } }
.tw-team.solo{ font-size:clamp(52px,8vh,76px); top:-74px; }
@media (max-width:700px){ .tw-team.solo{ font-size:40px; top:-48px; } }

/* ---------- görselli arena (art) ---------- */
.tw-arena.art{ height:clamp(150px,30vh,280px); background:#9AB97F url(../games/tw-bg.jpg) center 78%/cover no-repeat; }
.tw-arena.art::after{ display:none; }
.tw-arena.art::before{ top:auto; bottom:4%; height:30%; width:8px; margin-left:-4px; background:repeating-linear-gradient(#fff 0 10px, #EF4444 10px 20px); border-radius:4px; box-shadow:0 0 0 2px rgba(0,0,0,.15); z-index:1; }
.tw-arena.art .tw-cloud{ display:none; }
.tw-arena.art .tw-rope{ left:14%; right:14%; top:8%; bottom:3%; height:auto; display:flex; align-items:flex-end; transition:transform .55s cubic-bezier(.34,1.56,.64,1); }
.tw-arena.art .tw-team{ position:relative; top:auto; left:auto; right:auto; height:100%; flex-shrink:0; display:block; font-size:0; }
.tw-arena.art .tw-team img{ height:100%; display:block; transform-origin:50% 100%; filter:drop-shadow(0 6px 4px rgba(0,0,0,.3)); transition:transform .3s; }
.tw-arena.art .tw-mid{ position:relative; flex:1; align-self:stretch; min-width:40px; }
.tw-arena.art .tw-line{ top:34%; height:9px; margin-top:-2px; left:-2px; right:-2px; border-radius:5px;
  background:repeating-linear-gradient(115deg, #B88A4E 0 6px, #8A6232 6px 9px, #D4AA6A 9px 14px); box-shadow:0 2px 0 rgba(0,0,0,.25); }
.tw-arena.art .tw-knot{ top:34%; width:22px; height:46px; margin:-2px 0 0 -11px; border-radius:4px 4px 12px 12px; border:3px solid #fff; background:linear-gradient(#EF4444,#B91C1C); }
.tw-arena.art .tw-knot::after{ display:none; }
.tw-line.shake{ animation:twRopeShake .45s ease; }
@keyframes twRopeShake{ 20%{ transform:translateY(-4px); } 45%{ transform:translateY(3px); } 70%{ transform:translateY(-2px); } }
/* çekme / sendeleme */
.tw-arena.art .tw-team.t0.pull img{ animation:twArtPull0 .55s ease; }
.tw-arena.art .tw-team.t1.pull img{ animation:twArtPull1 .55s ease; }
.tw-arena.art .tw-team.t0.slip img{ animation:twArtSlip0 .55s ease; }
.tw-arena.art .tw-team.t1.slip img{ animation:twArtSlip1 .55s ease; }
@keyframes twArtPull0{ 40%{ transform:translateX(-12px) rotate(-5deg) scale(1.04); } }
@keyframes twArtPull1{ 40%{ transform:translateX(12px) rotate(5deg) scale(1.04); } }
@keyframes twArtSlip0{ 40%{ transform:translateX(14px) rotate(7deg); } }
@keyframes twArtSlip1{ 40%{ transform:translateX(-14px) rotate(-7deg); } }
.tw-dust{ position:absolute; bottom:2%; font-size:clamp(26px,4vh,40px); animation:twDust .8s ease-out forwards; pointer-events:none; }
.tw-dust.d0{ left:8%; transform:scaleX(-1); } .tw-dust.d1{ right:8%; }
@keyframes twDust{ from{ opacity:1; } to{ opacity:0; margin-bottom:14px; filter:blur(2px); } }
.tw-dust.d0{ animation-name:twDust0; } @keyframes twDust0{ from{ opacity:1; transform:scaleX(-1) translateX(0); } to{ opacity:0; transform:scaleX(-1) translateX(30px); } }
.tw-dust.d1{ animation-name:twDust1; } @keyframes twDust1{ from{ opacity:1; transform:translateX(0); } to{ opacity:0; transform:translateX(30px); } }
/* bitiş */
.tw-arena.art .tw-team.won img{ animation:twArtWin .5s ease-in-out infinite alternate; }
@keyframes twArtWin{ from{ transform:translateY(0); } to{ transform:translateY(-10%); } }
.tw-arena.art .tw-team.fell img{ animation:none; transform:rotate(-70deg) translate(-10%, 30%); transition:transform .6s cubic-bezier(.5,-.3,.6,1.2); }
.tw-arena.art .tw-team.t0.fell img{ transform:rotate(70deg) translate(10%, 30%); }
.tw-arena.art .tw-team.won::before{ content:'🏆 WINNER!'; position:absolute; left:50%; top:-4%; transform:translateX(-50%); z-index:3; white-space:nowrap;
  font:700 clamp(16px,2.6vh,24px) 'Fredoka',sans-serif; color:#1B1740; background:#FDE047; padding:4px 14px; border-radius:14px; box-shadow:0 4px 0 #CA8A04; animation:gkPop .4s ease; }
.tw-arena.art .tw-flag{ z-index:3; }
@media (max-width:700px){
  .tw-arena.art{ height:150px; }
  .tw-arena.art .tw-rope{ left:3%; right:3%; top:22%; }
  .tw-arena.art .tw-team{ height:100%; }
  .tw-arena.art .tw-flag{ font-size:11px; padding:2px 8px; }
}
.tw-arena.art .tw-rope{ z-index:4; }