/* GFLAG · Bayrak Avı sahnesi: 3×3 harita. Her cam altın çerçeveli kristal; üst yarısı rakibin, alt yarısı senin katmanın
   (sahibinin renginde). Değer, hasar çatlağı, güçlendirme parlaması, kırılınca bayrak ya da boş cam; bayrak saklama çubuğu.
   Masanın geri kalanı ortak: duel.css. */
.field-wrap{flex:1 1 0;min-height:0;width:100%;container-type:size;display:flex;align-items:center;justify-content:center}
.field{position:relative;width:min(100cqw,100cqh,380px);aspect-ratio:1;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
  gap:clamp(5px,2.2cqmin,10px);touch-action:none;-webkit-touch-callout:none;animation:sceneIntro .9s cubic-bezier(.2,1.3,.4,1) both}

/* ---------- telefonda harita büyük: sahnenin yan boşluğu dar, oyuncu bölgeleri bir tık küçük ----------
   (kısa ekranlarda duel.css zaten daha küçük değerler verir; bunlar yalnız uzun ekranlarda) */
.stage{padding:6px 32px 0}
.round{right:0}
.round b{font-size:19px}
.round span{font-size:11px}
.field.playable::before{left:-26px}
.field.playable::after{right:-26px}
.result{min-height:44px;padding-top:4px}
.game-coach{margin:0 0 4px;padding-top:6px;padding-bottom:6px}
@media (min-height:741px){
  .chip{--s:clamp(36px,10.6vw,44px)}
  .actrow{--ds:clamp(48px,14.6vw,58px);--lift:10px}
  .tray{--d:clamp(32px,9.8vw,38px)}
  .zone{gap:4px;padding:5px 12px}
  .total{height:24px}
  .total b{font-size:24px}
}

/* ---------- cam: altın çerçeve, iki katman, ortada adı ---------- */
.cell{position:relative;min-width:0;min-height:0;padding:4px;border:0;border-radius:12px;display:flex;flex-direction:column;gap:3px;
  container-type:inline-size;cursor:default;color:inherit;
  background:linear-gradient(140deg,var(--gold-hi),var(--gold) 25%,var(--gold-lo) 50%,var(--gold) 72%,var(--gold-hi));
  box-shadow:0 0 0 1.5px var(--gold-ink),0 5px 0 -1px var(--stone-edge),0 0 18px rgba(134,230,255,.2);
  transition:box-shadow .2s,transform .15s,filter .3s}
.cn{position:absolute;left:-4px;top:50%;transform:translateY(-50%);z-index:2;pointer-events:none;
  font:10px/1 var(--f-display);font-style:normal;letter-spacing:.03em;padding:3px 5px 2px;border-radius:99px;
  color:var(--gold-ink);background:linear-gradient(var(--gold-hi),var(--gold));box-shadow:0 0 0 1.5px var(--gold-ink)}

/* katman: kristal, sahibinin renginde dış kenardan tül; ::after hasar çatlakları (--dmg kadar görünür) */
.ly{flex:1;min-height:0;position:relative;border-radius:8px;overflow:hidden;display:grid;place-items:center;
  background:var(--crystal);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),inset 0 0 12px rgba(255,255,255,.2);
  transition:filter .3s,box-shadow .3s}
.ly::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(color-mix(in srgb,var(--team) 38%,transparent),transparent 85%)}
.ly.bot::before{background:linear-gradient(0deg,color-mix(in srgb,var(--team) 38%,transparent),transparent 85%)}
.ly::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--dmg,0);transition:opacity .3s;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50' preserveAspectRatio='none'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='rgba(10,30,80,.6)' stroke-width='2.6' d='M54 27L41 17L31 19L19 5M41 17L44 3M54 27L67 13L78 17L90 3M54 27L39 36L24 34L9 48M54 27L64 39L81 40L95 48M64 39L62 49'/%3E%3Cpath stroke='white' stroke-width='1.1' d='M54 27L41 17L31 19L19 5M41 17L44 3M54 27L67 13L78 17L90 3M54 27L39 36L24 34L9 48M54 27L64 39L81 40L95 48M64 39L62 49'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat}
.ly b{position:relative;z-index:1;font:26cqw/1 var(--f-display);color:#fff;-webkit-text-stroke:3.2cqw #17407e;paint-order:stroke fill;
  text-shadow:0 2cqw 0 #0f2d5e,0 0 5cqw rgba(255,255,255,.45)}
/* güçlendirilmiş (başlangıcın üstünde): buz parlaması */
.ly.thick{filter:saturate(1.25) brightness(1.08);box-shadow:inset 0 0 0 1.5px var(--frost),inset 0 0 16px rgba(134,230,255,.8)}
/* kırık: koyu boşluk; arkasında bayrak varsa sahibinin renginde parlar, yoksa ✕ */
.ly.broken{background:radial-gradient(circle at 50% 40%,#232a63,#0b0e2a 80%);box-shadow:inset 0 0 0 1px rgba(242,193,78,.3),inset 0 4px 10px rgba(0,0,0,.55)}
.ly.broken::after{display:none}
.ly.broken.flag{background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--team) 55%,#0b0e2a),#0b0e2a 85%)}
.ly .fl,.ly .x{display:none;position:absolute;z-index:1}
.ly svg{width:100%;height:100%;display:block}
/* bayrak: beyaz rozette sahibinin koyu renginde (Mavi lacivert, Kırmızı koyu kırmızı), kristalde de kırık camda da net seçilir.
   Kendi saklı bayrağın (ve saklarken seçtiğin camlar) köşede; kırılınca bulunan bayrak ortada, daha büyük */
.ly.flag .fl{display:block;right:4%;top:7%;width:36cqw;height:36cqw;padding:4cqw;border-radius:26%;color:var(--team-dk);
  background:#fff;box-shadow:0 0 0 2px var(--team-dk),0 2px 4px rgba(0,0,0,.45)}
.ly.flag:not(.broken) b{translate:-17cqw 0}   /* değer rozetin solunda kalır (iki haneli de) */
.ly.broken.flag .fl{position:relative;right:auto;top:auto;width:44cqw;height:44cqw;padding:5cqw;
  box-shadow:0 0 0 2.5px var(--team-dk),0 0 12px var(--team),0 2px 0 rgba(0,0,0,.5)}
.ly.broken:not(.flag) .x{display:block;position:relative;width:24cqw;height:24cqw;color:rgba(174,179,224,.45)}

/* ---------- hamle sırası: vurulabilecek katmanlar yöne göre nabız atar (köz: kır, buz: güçlendir) ---------- */
.field.k{--glow:rgba(255,138,61,.9)}
.field.g{--glow:rgba(134,230,255,.95)}
.field.playable .cell.hit{cursor:pointer}
.field.playable .cell.hit:active{transform:scale(.96)}
.field.playable .cell:not(.hit){filter:saturate(.55) brightness(.8)}
.ly.tgt{box-shadow:inset 0 0 0 2px var(--glow),inset 0 0 14px var(--glow);animation:lyGlow 1.5s ease-in-out infinite}
@keyframes lyGlow{0%,100%{box-shadow:inset 0 0 0 1.5px var(--glow),inset 0 0 8px var(--glow)}50%{box-shadow:inset 0 0 0 2.5px var(--glow),inset 0 0 22px var(--glow)}}
/* Koç önerisi: altın halka */
.cell.suggest{box-shadow:0 0 0 3px var(--gold-hi),0 0 18px var(--gold),0 5px 0 -1px var(--stone-edge);animation:cellSugg 1.2s ease-in-out infinite}
@keyframes cellSugg{0%,100%{box-shadow:0 0 0 2px var(--gold-hi),0 0 10px var(--gold),0 5px 0 -1px var(--stone-edge)}
  50%{box-shadow:0 0 0 4px var(--gold-hi),0 0 26px var(--gold),0 5px 0 -1px var(--stone-edge)}}

/* ---------- bayrak saklama ---------- */
.field.hiding .cell{cursor:pointer}
.field.hiding .ly.flag .fl{animation:popIn .32s cubic-bezier(.3,1.6,.5,1)}
.hide-bar{flex:none;display:flex;justify-content:center;gap:10px;margin:0 0 5px}
.hide-bar .btn{font-size:16px;padding:9px 18px}

@media (max-height:620px){
  .hide-bar .btn{font-size:15px;padding:8px 14px}
}