/* Kart Kare — "oyuncak kutusu" aydınlık tema:
   güneşli krem zemin, pastel bulut lekeleri, şeker turuncusu vurgu,
   çıkartma tipografisi, basılabilir oyuncak butonlar. */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  --paper: #FFF6E9; --paper-2: #FFE9D0;
  --ink: #33265C; --ink-soft: #7A6BAE;
  --sun: #FFAA1F; --sun-deep: #FF8A00; --sun-dark: #D97706; --sun-soft: #FFD98A;
  --grape: #7C5CFF; --mint: #3ECFA5; --sky: #4DB8FF; --coral: #FF6B5E;
  --sq-light: #FFEFD3; --sq-dark: #E9B67A; --board-edge: #FFFFFF;
  --card-face: #FFFDF7;
  --shadow: rgba(84, 55, 34, .22);
  font-size: clamp(14px, 2.2vmin, 18px);
}

html, body { height: 100%; }
body {
  font-family: "SF Pro Rounded", ui-rounded, -apple-system, "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  background: linear-gradient(var(--paper), var(--paper-2));
  min-height: 100%;
  overflow: hidden;
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
}
/* pastel bulut lekeleri: yavaşça süzülen üç dev leke */
body::before {
  content: ''; position: fixed; inset: -22%;
  background:
    radial-gradient(42% 34% at 16% 12%, rgba(255, 187, 120, .38), transparent 70%),
    radial-gradient(38% 32% at 86% 20%, rgba(125, 216, 255, .32), transparent 70%),
    radial-gradient(44% 36% at 50% 96%, rgba(112, 224, 180, .30), transparent 70%);
  animation: blobfloat 26s ease-in-out infinite alternate;
  pointer-events: none; z-index: 0;
}
@keyframes blobfloat { to { transform: translate(3%, -2%) scale(1.06) rotate(2deg); } }
.screen, .overlay, #toast { position: relative; z-index: 1; }

.screen { display: none; position: fixed; inset: 0; flex-direction: column; align-items: center; }
.screen.active { display: flex; }
/* alt sekme çubuğu olan ekranlar: içerik üstten başlar, altta bar için boşluk */
.screen.shell { padding: 1.4rem 1rem calc(5.6rem + env(safe-area-inset-bottom, 0)); overflow-y: auto; justify-content: flex-start; }

/* ---------- Alt sekme çubuğu (mobil standart) ---------- */
#bunting {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: .4rem .3rem calc(.4rem + env(safe-area-inset-bottom, 0));
  background: #fff; border-top: 2px solid #F0DFBE; box-shadow: 0 -4px 16px var(--shadow);
}
#bunting.hidden { display: none; }
.pennants { display: flex; justify-content: space-around; align-items: stretch; gap: 2px; max-width: 560px; margin: 0 auto; }
.pennant {
  flex: 1; background: none; border: none; padding: .3rem 0 .1rem; box-shadow: none; text-shadow: none;
  display: flex; flex-direction: column; align-items: center; gap: .2rem; cursor: pointer; color: #C6B78F;
  transition: color .16s;
}
.pennant > svg { width: 1.55rem; height: 1.55rem; color: currentColor; display: block; transition: transform .16s; }
.pennant span { font-size: .66rem; font-weight: 900; color: currentColor; line-height: 1; }
.pennant.on { color: var(--sun-deep); }
.pennant.on > svg { transform: translateY(-1px) scale(1.08); }
.pennant:active > svg { transform: scale(.9); }

/* ---------- Ödüller ---------- */
#screen-rewards { padding: 1.4rem 1rem calc(5.6rem + env(safe-area-inset-bottom, 0)); overflow-y: auto; justify-content: flex-start; }
#screen-rewards h2, #screen-howto h2 {
  color: var(--sun-deep); font-size: 1.8rem; transform: rotate(-1deg); margin-bottom: 1.1rem;
  text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff, 0 8px 18px var(--shadow);
}
.rw-grid {
  width: min(94vw, 560px); display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .7rem; margin-bottom: 1.2rem;
}
.rw-card {
  background: #fff; border-radius: 18px; padding: 1rem .7rem; text-align: center;
  box-shadow: 0 4px 0 #F0E2C8, 0 10px 22px var(--shadow); border-top: 5px solid var(--c);
}
.rw-big { font-size: 1.7rem; font-weight: 900; color: var(--ink); display: flex; align-items: center; justify-content: center; gap: .3rem; }
.rw-big svg.rw-s { width: 1.3rem; height: 1.3rem; color: var(--sun); }
.rw-lab { font-size: .82rem; font-weight: 700; color: var(--ink-soft); margin-top: .2rem; }
.rw-worlds { width: min(94vw, 560px); display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.4rem; }
.rw-world { display: flex; align-items: center; gap: .6rem; background: #fff; border-radius: 14px; padding: .5rem .8rem; box-shadow: 0 3px 0 #F0E2C8, 0 6px 12px var(--shadow); }
.rw-wn { display: flex; align-items: center; gap: .35rem; font-weight: 800; font-size: .9rem; color: var(--ink); min-width: 7.5rem; }
.rw-wn svg { width: 1.3em; height: 1.3em; color: var(--tone); }
.rw-wn img.rw-art { width: 1.7em; height: 1.7em; object-fit: contain; }
.rw-bar { flex: 1; height: .7rem; background: #EFE3CB; border-radius: 999px; overflow: hidden; }
.rw-bar i { display: block; height: 100%; background: var(--tone); border-radius: 999px; transition: width .5s; }
.rw-wc { font-weight: 900; font-size: .8rem; color: var(--ink-soft); min-width: 2.6rem; text-align: right; }

/* ---------- Ustalık Defteri ---------- */
#screen-mastery { padding: 1.4rem 1rem calc(5.6rem + env(safe-area-inset-bottom, 0)); overflow-y: auto; justify-content: flex-start; }
.ms-intro { width: min(94vw, 560px); text-align: center; color: var(--ink-soft); font-weight: 700; font-size: .9rem; margin: 0 0 .5rem; line-height: 1.45; }
.ms-tote { display: inline-flex; align-items: center; gap: .35rem; font-weight: 900; color: var(--ink); background: #fff; border-radius: 999px; padding: .35rem .9rem; box-shadow: 0 3px 0 #F0E2C8, 0 6px 12px var(--shadow); margin-bottom: 1rem; font-size: .85rem; }
.ms-tote svg.ms-tote-s { width: 1.1em; height: 1.1em; color: var(--sun); }
.ms-grid { width: min(94vw, 560px); display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .8rem; }
.ms-card {
  background: #fff; border-radius: 20px; padding: .85rem .95rem 1rem;
  box-shadow: 0 4px 0 #F0E2C8, 0 10px 22px var(--shadow); border: 2.5px solid transparent;
  display: flex; flex-direction: column; gap: .55rem;
}
.ms-card.on { border-color: var(--sun); box-shadow: 0 4px 0 #F0E2C8, 0 0 20px rgba(255, 170, 31, .5), 0 10px 22px var(--shadow); }
.ms-top { display: flex; align-items: center; gap: .6rem; }
.ms-portre { width: 2.8rem; height: 2.8rem; flex: none; display: grid; place-items: center; background: linear-gradient(#FFF6E4, #FFE7B8); border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 170, 31, .4); }
.ms-portre img, .ms-portre svg { width: 82%; height: 82%; object-fit: contain; }
.ms-head { flex: 1; display: flex; flex-direction: column; }
.ms-ad { font-size: 1.05rem; color: var(--ink); }
.ms-rutbe { font-size: .78rem; font-weight: 800; color: var(--sun-deep); }
.ms-say { font-size: 1.5rem; font-weight: 900; color: var(--ink); }
.ms-bar { height: .7rem; background: #EFE3CB; border-radius: 999px; overflow: hidden; }
.ms-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--sun), var(--sun-deep)); border-radius: 999px; transition: width .6s cubic-bezier(.3, 1.4, .5, 1); }
.ms-alt { font-size: .76rem; font-weight: 700; color: var(--ink-soft); }
.ms-guc { display: flex; align-items: center; gap: .45rem; font-size: .8rem; font-weight: 800; color: var(--ink-soft); background: #F6EEDD; border-radius: 12px; padding: .4rem .6rem; }
.ms-guc.acik { color: var(--ink); background: linear-gradient(#FFF3D6, #FFE3A8); box-shadow: inset 0 0 0 1.5px rgba(255, 170, 31, .5); }
.ms-guc-ic { width: 1.3rem; height: 1.3rem; flex: none; display: grid; place-items: center; }
.ms-guc-ic svg { width: 100%; height: 100%; color: #B9A98A; }
.ms-guc.acik .ms-guc-ic svg { color: var(--sun-deep); }

/* ---------- Nasıl Oynanır ---------- */
#screen-howto { padding: 1.4rem 1rem calc(5.6rem + env(safe-area-inset-bottom, 0)); overflow-y: auto; justify-content: flex-start; }
.ht-list { width: min(94vw, 500px); display: flex; flex-direction: column; gap: .8rem; }
.ht-step {
  display: flex; align-items: center; gap: .9rem; background: #fff; border-radius: 18px;
  padding: .9rem 1.1rem; box-shadow: 0 4px 0 #F0E2C8, 0 8px 18px var(--shadow);
}
.ht-no {
  width: 2rem; height: 2rem; flex: none; border-radius: 50%;
  background: linear-gradient(#FFC24C, var(--sun-deep)); color: #fff;
  display: grid; place-items: center; font-weight: 900; box-shadow: 0 3px 6px var(--shadow);
}
.ht-icon { width: 2.6rem; flex: none; display: grid; place-items: center; }
.ht-icon .ht-ic { width: 2.4rem; height: 2.4rem; color: var(--sun-deep); }
.ht-txt { font-size: .92rem; color: var(--ink-soft); line-height: 1.35; }
.ht-txt b { display: block; color: var(--ink); font-size: 1.02rem; margin-bottom: .1rem; }

button {
  font: inherit; color: #fff; cursor: pointer; border: none;
  background: linear-gradient(#FFC24C, var(--sun-deep));
  border-radius: 16px; padding: .8em 2.2em; font-weight: 900; font-size: 1.15rem;
  letter-spacing: .02em;
  text-shadow: 0 2px 0 rgba(160, 80, 0, .35);
  box-shadow: 0 5px 0 var(--sun-dark), 0 12px 22px var(--shadow);
  transition: transform .12s, box-shadow .12s;
}
button:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--sun-dark), 0 4px 10px var(--shadow); }
button.ghost {
  background: transparent; color: var(--ink-soft); box-shadow: none; text-shadow: none;
  font-weight: 700; font-size: .95rem; text-decoration: underline; padding: .5em 1em;
}
button.soft {
  background: #fff; color: var(--ink); text-shadow: none;
  box-shadow: 0 4px 0 #E8D9BF, 0 8px 14px var(--shadow);
}
button.soft:active { box-shadow: 0 1px 0 #E8D9BF; }

/* "İzle" demo: hayalet kahraman + afiş */
#hero.ghosting .inner svg, #hero.ghosting .inner .board-piece { opacity: .6; filter: drop-shadow(0 0 6px var(--sky)) drop-shadow(0 3px 5px var(--shadow)); }
#hero.ghosting { animation: ghostpulse 1.4s ease-in-out infinite; }
@keyframes ghostpulse { 50% { opacity: .7; } }
.watch-banner {
  align-self: center; margin: auto;
  background: linear-gradient(var(--sky), #2f9fe0); color: #fff;
  font-weight: 900; font-size: 1.05rem; padding: .6em 1.4em; border-radius: 999px;
  box-shadow: 0 5px 0 #1f7ab0, 0 10px 20px var(--shadow);
  animation: nextpulse 1.4s ease-in-out infinite;
}

/* ---------- Başlık ekranı ---------- */
#screen-home { justify-content: flex-start; gap: 0; padding: 0; text-align: center; }
#home-top { width: 100%; display: flex; align-items: center; gap: .5rem; padding: max(30px, calc(.6rem + env(safe-area-inset-top, 0))) .8rem .5rem; }
#avatar { width: 2.7rem; height: 2.7rem; border-radius: 14px; border: none; flex: none; cursor: pointer; color: #fff; padding: 0;
  background: linear-gradient(150deg, #9166D6, #6A3FB4); display: grid; place-items: center; box-shadow: 0 3px 0 #55309a, 0 5px 10px var(--shadow); }
#avatar svg { width: 1.8rem; height: 1.8rem; transform: translateY(-7%); }
#home-id { display: flex; flex-direction: column; line-height: 1.05; margin-right: auto; text-align: left; }
#home-id b { font-size: .95rem; font-weight: 900; color: var(--ink); }
#rank-lab { font-size: .72rem; font-weight: 900; color: var(--grape); }
.hchip { display: flex; align-items: center; gap: .3rem; background: #fff; border-radius: 999px; padding: .32rem .7rem .32rem .5rem;
  font-weight: 900; font-size: .92rem; color: var(--ink); box-shadow: 0 3px 0 #EBD9B6, 0 4px 8px var(--shadow); flex: none; }
.hchip svg { width: 1.05rem; height: 1.05rem; }
#btn-settings { width: 2.4rem; height: 2.4rem; border-radius: 12px; border: none; flex: none; cursor: pointer; color: var(--ink); padding: 0;
  background: #fff; display: grid; place-items: center; box-shadow: 0 3px 0 #EBD9B6, 0 4px 8px var(--shadow); }
#btn-settings svg { width: 1.45rem; height: 1.45rem; }
#home-body { flex: 1; width: 100%; max-width: 460px; margin: 0 auto; overflow-y: auto; display: flex; flex-direction: column; align-items: center;
  padding: .3rem 1rem calc(5.8rem + env(safe-area-inset-bottom, 0)); }
#title-art { width: min(66%, 260px); border-radius: 20px; border: 5px solid #fff; box-shadow: 0 12px 28px var(--shadow); transform: rotate(-1.5deg); margin-top: .2rem; }
#screen-home h1 {
  font-size: clamp(2.4rem, 11vw, 3.4rem); letter-spacing: .03em; line-height: 1; margin: .5rem 0 .15rem; color: var(--sun-deep); transform: rotate(-2deg);
  text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff, -3px 0 0 #fff, 3px 0 0 #fff, 0 -3px 0 #fff, 0 3px 0 #fff, 0 10px 22px var(--shadow);
  animation: titlefloat 4s ease-in-out infinite;
}
@keyframes titlefloat { 50% { transform: rotate(-2deg) translateY(-6px); } }
#screen-home .tagline { color: var(--ink-soft); font-size: .92rem; font-weight: 700; max-width: 22em; margin-bottom: .1rem; }
.flame { display: inline-grid; place-items: center; }
#win-text .flame { width: 1.1em; height: 1.1em; color: var(--coral); vertical-align: -0.15em; }
#win-text .flame svg { width: 100%; height: 100%; }

/* birincil eylem: tek dominant "Devam Et / Oyna" */
.cta-primary { width: 100%; margin-top: 1rem; border: none; border-radius: 22px; padding: .85rem 1rem; cursor: pointer;
  background: linear-gradient(180deg, #FFB93E, var(--sun-deep)); box-shadow: 0 6px 0 var(--sun-dark), 0 12px 20px var(--shadow);
  display: flex; align-items: center; gap: .8rem; text-align: left; }
.cta-primary:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--sun-dark), 0 6px 12px var(--shadow); }
.cta-ic { width: 2.7rem; height: 2.7rem; border-radius: 14px; background: rgba(255, 255, 255, .26); display: grid; place-items: center; flex: none; }
.cta-ic svg { width: 1.5rem; height: 1.5rem; color: #fff; }
.cta-lab { display: flex; flex-direction: column; line-height: 1.12; }
.cta-lab b { font-size: 1.4rem; font-weight: 900; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .14); }
#cta-sub { font-size: .8rem; font-weight: 800; color: #FFF3DC; }
#cta-sub:empty { display: none; }
.cta-go { margin-left: auto; color: #fff; opacity: .92; display: grid; place-items: center; }
.cta-go svg { width: 1.6rem; height: 1.6rem; }

/* mod kartları: tutarlı ikon + başlık + alt başlık */
#mode-grid { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: .9rem; }
.modecard { border: none; text-align: left; border-radius: 20px; padding: .8rem; cursor: pointer; position: relative; text-shadow: none;
  background: #fff; box-shadow: 0 4px 0 #EBD9B6, 0 8px 14px var(--shadow); display: flex; flex-direction: column; gap: .3rem; min-height: 6.4rem; }
.modecard:active { transform: translateY(2px); box-shadow: 0 2px 0 #EBD9B6, 0 4px 8px var(--shadow); }
.mc-ic { width: 2.5rem; height: 2.5rem; border-radius: 13px; display: grid; place-items: center; }
.mc-ic svg { width: 1.5rem; height: 1.5rem; }
.mc-t { font-size: .98rem; font-weight: 900; color: var(--ink); }
.mc-s { font-size: .74rem; font-weight: 800; color: var(--ink-soft); }
.mc-badge { position: absolute; top: .65rem; right: .65rem; font-size: .64rem; font-weight: 900; padding: .18rem .5rem; border-radius: 999px; background: #E4F7F0; color: #177A5C; }
.mc-badge:empty { display: none; }
.mc-badge.dark { background: rgba(255, 255, 255, .16); color: #EBD9FF; }
.m-daily .mc-ic { background: #E4F7F0; } .m-daily .mc-ic svg { fill: #2FBF97; }
.m-endless .mc-ic { background: #E6F1FC; } .m-endless .mc-ic svg { stroke: #4E9BE0; }
.m-duel .mc-ic { background: #F0E9FB; } .m-duel .mc-ic svg { fill: #7A4FC0; }
.m-usta { background: linear-gradient(165deg, #413A5C, #2A2440); box-shadow: 0 4px 0 #14101F, 0 8px 16px var(--shadow); }
.m-usta .mc-t { color: #fff; } .m-usta .mc-s { color: #B9AEE0; }
.m-usta .mc-ic { background: rgba(255, 255, 255, .12); } .m-usta .mc-ic svg { fill: #F2ECFF; }

/* ayarlar sayfası */
.set-row { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: .55rem .1rem; font-weight: 800; color: var(--ink); border-bottom: 1.5px solid #F1E6CE; }
.switch { width: 3.2rem; height: 1.8rem; border-radius: 999px; border: none; cursor: pointer; background: #DDD0B4; position: relative; box-shadow: none; transition: background .18s; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .25); transition: left .18s; }
.switch.on { background: #2FBF97; }
.switch.on::after { left: calc(100% - 1.65rem); }

/* ---------- Bölüm haritası: dünya kartları + gerçek tahta minyatürleri ---------- */
#screen-map { padding: 1.4rem 1rem calc(5.6rem + env(safe-area-inset-bottom, 0)); overflow-y: auto; justify-content: flex-start; }
#map-top {
  width: min(94vw, 620px); display: flex; align-items: center; gap: 1rem;
  flex-wrap: wrap; margin-bottom: 1.1rem;
}
#screen-map h2 {
  color: var(--sun-deep); font-size: 1.8rem; transform: rotate(-1deg);
  text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff, 0 8px 18px var(--shadow);
}
#dust-count { display: flex; align-items: center; gap: .4rem; color: var(--sun-dark); font-weight: 900; font-size: 1.05rem; }
#dust-count svg.dust-star { width: 1.2em; height: 1.2em; filter: drop-shadow(0 2px 4px var(--shadow)); }
#btn-continue { margin-left: auto; font-size: .98rem; padding: .6em 1.4em; }
.world-sec {
  width: min(94vw, 620px); margin-bottom: 1.2rem;
  background: #fff; border-radius: 22px; padding: .9rem .9rem 1rem;
  box-shadow: 0 5px 0 #F0E2C8, 0 16px 36px var(--shadow);
  border-top: 6px solid var(--tone, var(--sun));
}
.world-head { display: flex; align-items: center; gap: .8rem; margin-bottom: .7rem; }
.world-art {
  width: 3.6rem; height: 3.6rem; object-fit: cover; border-radius: 14px;
  border: 3px solid #fff; outline: 2px solid #F1E2C6;
  box-shadow: 0 6px 14px var(--shadow); background: var(--paper);
}
.world-art.svgart { display: grid; place-items: center; }
.world-art.svgart svg { width: 72%; height: 72%; color: var(--tone); }
.world-meta h3 { color: var(--ink); font-size: 1.1rem; font-weight: 900; }
.world-prog {
  display: inline-block; margin-top: .25rem; font-size: .75rem; font-weight: 900;
  color: #fff; background: var(--tone); border-radius: 999px; padding: .18em .8em;
  box-shadow: 0 2px 6px var(--shadow);
}
.lv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .6rem; }
.lv-card {
  position: relative; padding: .35rem .35rem .5rem; border-radius: 14px;
  background: var(--paper); border: none;
  box-shadow: 0 3px 0 #E8D9BF, 0 6px 14px var(--shadow);
  transition: transform .15s;
}
.lv-card:hover { transform: translateY(-3px); }
.lv-card svg.thumb {
  width: 100%; aspect-ratio: 1; border-radius: 9px; display: block;
  box-shadow: inset 0 0 0 2px rgba(180, 130, 70, .25);
}
.lv-num {
  position: absolute; top: -7px; left: -7px;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--tone, var(--sun)); color: #fff; font-weight: 900; font-size: .85rem;
  box-shadow: 0 0 0 3px #fff, 0 4px 8px var(--shadow);
}
.lv-stars { display: flex; justify-content: center; gap: .15rem; margin-top: .3rem; height: 1rem; }
.lv-stars svg { width: .95rem; height: .95rem; color: var(--sun); filter: drop-shadow(0 1px 2px var(--shadow)); }
.lv-card.done svg.thumb { box-shadow: inset 0 0 0 2px var(--sun); }
.lv-card.locked { opacity: .45; pointer-events: none; filter: saturate(.4); }
.lv-lock { position: absolute; inset: 0; display: grid; place-items: center; }
.lv-lock svg { width: 34%; color: var(--ink-soft); filter: drop-shadow(0 2px 4px #fff); }
.lv-card.next { animation: nextpulse 1.6s ease-in-out infinite; }
@keyframes nextpulse {
  0%, 100% { box-shadow: 0 3px 0 #E8D9BF, 0 6px 14px var(--shadow), 0 0 0 0 rgba(255, 170, 31, .55); }
  50% { box-shadow: 0 3px 0 #E8D9BF, 0 6px 14px var(--shadow), 0 0 0 8px rgba(255, 170, 31, 0); }
}

/* ---------- Oyun ekranı ---------- */
#screen-game { justify-content: flex-start; padding: .6rem .6rem 0; }
#board-wrap { flex: 1; display: grid; place-items: center; min-height: 0; }
#topbar {
  width: min(96vw, 640px); display: flex; align-items: center; gap: .8rem; padding: .3rem .2rem;
}
#topbar .lvl-name { font-weight: 900; color: var(--ink); font-size: 1.05rem; white-space: nowrap; }
#btn-back {
  background: #fff; color: var(--ink); text-shadow: none;
  box-shadow: 0 4px 0 #E8D9BF, 0 8px 14px var(--shadow);
  padding: .45em .9em; font-size: 1rem; border-radius: 12px;
}
#btn-back:active { box-shadow: 0 1px 0 #E8D9BF; }
#moves { margin-left: auto; display: flex; align-items: center; gap: .35rem; }
#moves .pip {
  width: .9rem; height: .9rem; border-radius: 50%;
  background: linear-gradient(var(--sun), var(--sun-deep));
  box-shadow: 0 0 0 2px #fff, 0 3px 6px var(--shadow);
}
#moves .pip.used { background: #EADFCB; box-shadow: 0 0 0 2px #fff; }
/* iri ikonlu ipucu kartı — bölüm ipucu, gözden kaçmasın diye belirgin */
#intro-line { min-height: 1.5em; text-align: center; padding: 0 1rem; }
#intro-line.has {
  display: inline-flex; align-items: center; gap: .5rem;
  background: #fff; color: var(--ink); font-weight: 800; font-size: 1rem;
  padding: .5em 1.1em; border-radius: 999px; margin: .2rem auto .1rem;
  box-shadow: 0 4px 0 #F0E2C8, 0 8px 16px var(--shadow);
  animation: hintpop .4s cubic-bezier(.3, 1.4, .4, 1) backwards;
}
#intro-line .hint-ic { width: 1.5em; height: 1.5em; display: grid; place-items: center; }
#intro-line .hint-ic svg { width: 100%; height: 100%; color: var(--sun-deep); }
#intro-line .hint-ic img.hint-art { width: 100%; height: 100%; object-fit: contain; }
@keyframes hintpop { from { transform: translateY(-14px) scale(.8); opacity: 0; } }

/* sticker font (bilsemc2 logosu ruhu): kalın, konturlu, renkli, eğlenceli */
.fun-word {
  font-family: "SF Pro Rounded", ui-rounded, system-ui, sans-serif;
  font-weight: 900; font-size: 1.5rem; color: #fff; letter-spacing: .01em;
  -webkit-text-stroke: 5px var(--fun, var(--sun-deep));
  paint-order: stroke fill;
  text-shadow: 0 4px 0 rgba(90, 55, 20, .3);
  display: inline-block; transform: rotate(-4deg); white-space: nowrap;
}

/* kaçan/tehdit eden nesnenin konuşma balonu */
.emote-bubble {
  position: absolute; bottom: 88%; left: 50%; z-index: 14; pointer-events: none;
  transform: translateX(-50%);
  animation: emotepop .32s cubic-bezier(.3, 1.6, .4, 1) backwards, emotefade .4s ease-in 1.6s forwards;
}
.emote-bubble.below { bottom: auto; top: 86%; }
@keyframes emotepop { from { transform: translateX(-50%) translateY(12px) scale(0); } }
@keyframes emotefade { to { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(.9); } }
.wiggle { animation: wiggle .5s ease-in-out 2 !important; }
@keyframes wiggle { 20% { transform: rotate(-9deg); } 60% { transform: rotate(9deg); } }

#board {
  --n: 5;
  width: min(92vw, 54vh); aspect-ratio: 1;
  display: grid; grid-template-columns: repeat(var(--n), 1fr); grid-template-rows: repeat(var(--n), 1fr);
  border: .6rem solid var(--board-edge); border-radius: 18px;
  box-shadow:
    0 0 0 2px #F1E2C6,
    0 18px 44px var(--shadow),
    inset 0 0 0 2px rgba(180, 130, 70, .18);
  position: relative;
  background: var(--sq-light);
}
.sq { position: relative; }
.sq.light { background: var(--sq-light); }
.sq.dark { background: var(--sq-dark); }
.sq svg.star { position: absolute; inset: 14%; width: 72%; height: 72%; color: var(--sun); filter: drop-shadow(0 3px 6px rgba(217, 119, 6, .5)); animation: twinkle 1.6s ease-in-out infinite; }
.sq svg.rock { position: absolute; inset: 10%; width: 80%; height: 80%; color: #8d8da2; filter: drop-shadow(0 3px 3px var(--shadow)); }
/* üretilmiş board extras görselleri */
.sq img.rockart { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; filter: drop-shadow(0 3px 4px var(--shadow)); }
.sq img.keyart { position: absolute; inset: 12%; width: 76%; height: 76%; object-fit: contain; filter: drop-shadow(0 2px 5px rgba(217,119,6,.5)); animation: twinkle 1.8s ease-in-out infinite; }
.sq img.cageart { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; filter: drop-shadow(0 2px 4px var(--shadow)); }
@keyframes twinkle { 50% { transform: scale(.88); filter: drop-shadow(0 1px 2px rgba(217, 119, 6, .3)); } }

/* kart seçilince gidilebilir kareler */
.sq.target { cursor: pointer; }
.sq.target::after {
  content: ''; position: absolute; inset: 8%; border-radius: 26%;
  background: radial-gradient(circle, rgba(255, 255, 255, .85) 0%, rgba(255, 170, 31, .35) 55%, transparent 74%);
  box-shadow: inset 0 0 0 3px var(--sun-deep);
  animation: breathe 1.1s ease-in-out infinite;
}
.sq.target.capture::after { box-shadow: inset 0 0 0 4px #fff, 0 0 14px rgba(255, 138, 0, .8); }
@keyframes breathe { 50% { transform: scale(.92); opacity: .8; } }

/* oynanan hamlenin ışıklı yolu */
.sq.flash::before {
  content: ''; position: absolute; inset: 6%; border-radius: 24%;
  background: radial-gradient(circle, #fff 0%, rgba(255, 170, 31, .8) 45%, transparent 72%);
  animation: pathflash .7s ease-out forwards; z-index: 2;
}
@keyframes pathflash { 0% { opacity: 0; transform: scale(.3); } 25% { opacity: 1; transform: scale(1.05); } 100% { opacity: 0; transform: scale(1.2); } }

.sq svg.star.pop { animation: starpop .55s ease-out forwards; }
@keyframes starpop { 40% { transform: scale(1.6) rotate(20deg); filter: drop-shadow(0 0 24px #FFC24C); } 100% { transform: scale(0); opacity: 0; } }

/* yeni nesneler */
.sq svg.crystal { position: absolute; inset: 8%; width: 84%; height: 84%; filter: drop-shadow(0 3px 6px rgba(77, 184, 255, .45)); }
.sq svg.crystal .crack { opacity: 0; }
.sq svg.crystal.cracked .crack { opacity: 1; }
.sq svg.crystal.cracked .shell { opacity: .45; }
.sq svg.crystal.pop, .sq svg.cage.pop, .sq .crystal.pop { animation: starpop .55s ease-out forwards; }
.sq img.crystal { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(77,184,255,.45)); }
.sq .crystal.shake, .sq svg.crystal.shake { animation: crystalshake .4s ease-in-out; }
/* kaya paramparça patlaması (Kaya Kıran) */
.sq .smash-pop { animation: smashpop .5s ease-out forwards; z-index: 6; }
@keyframes smashpop { 0% { transform: scale(1); } 30% { transform: scale(1.25) rotate(6deg); } 100% { transform: scale(1.5) rotate(-8deg); opacity: 0; } }
@keyframes crystalshake { 25% { transform: translate(-8%, 0) rotate(-6deg); } 60% { transform: translate(6%, 0) rotate(5deg); } }
.sq svg.cage { position: absolute; inset: 8%; width: 84%; height: 84%; }
.sq svg.cage .bars { transition: opacity .5s; }
.sq svg.cage.open .bars { opacity: 0; }
.sq svg.keyobj { position: absolute; inset: 14%; width: 72%; height: 72%; filter: drop-shadow(0 2px 5px rgba(217, 119, 6, .5)); animation: twinkle 1.8s ease-in-out infinite; }
.guardwrap { position: absolute; inset: 0; display: grid; place-items: center; }
.guardwrap svg { width: 76%; height: 76%; color: #6E2D4F; filter: drop-shadow(0 0 8px rgba(255, 90, 90, .5)); }
.sq .trail { position: absolute; left: 50%; top: 50%; width: 12%; height: 12%; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(255, 138, 0, .4); }
.sq.danger { box-shadow: inset 0 0 0 3px rgba(255, 107, 94, .55); }
.sq.danger::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, rgba(255, 107, 94, .26) 0%, transparent 70%); pointer-events: none; }
.sq.danger.target::after {
  background: radial-gradient(circle, rgba(255, 255, 255, .85) 0%, rgba(255, 170, 31, .35) 55%, transparent 74%);
  box-shadow: inset 0 0 0 3px var(--sun-deep);
}

/* USTA modu: hedefler CİDDİ kara satranç taşları + klasik ahşap tahta tonu */
#board.usta .guardwrap svg { color: #191830; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .42)); width: 84%; height: 84%; }
#board.usta .guardwrap .guardart { width: 92%; height: 92%; object-fit: contain; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .45)); }
/* ALINABİLİR kara taş: yeşil parıltı (şimdi alabilirsin) */
#board.usta .gp-open .guardart, #board.usta .gp-open svg { filter: drop-shadow(0 0 7px #35C79A) drop-shadow(0 0 13px rgba(53, 199, 154, .6)) drop-shadow(0 3px 4px rgba(0, 0, 0, .4)); animation: gpglow 1.5s ease-in-out infinite; }
@keyframes gpglow { 50% { filter: drop-shadow(0 0 11px #35C79A) drop-shadow(0 0 20px rgba(53, 199, 154, .85)) drop-shadow(0 3px 4px rgba(0, 0, 0, .4)); } }
/* KORUMALI kara taş: soluk + kırmızı kilit rozeti (önce koruyanını al) */
#board.usta .gp-locked .guardart, #board.usta .gp-locked svg { filter: brightness(.66) drop-shadow(0 3px 4px rgba(0, 0, 0, .4)); }
.gp-lock { position: absolute; right: 0; top: 4%; width: 34%; height: 34%; display: grid; place-items: center; background: #E0566E; border-radius: 50%; box-shadow: 0 2px 5px rgba(0, 0, 0, .4); z-index: 3; }
.gp-lock svg { width: 60%; height: 60%; color: #fff; }
#board.usta .sq.light { background: #ECD8B4; }
#board.usta .sq.dark { background: #B98D63; }
#btn-usta.serious { background: linear-gradient(#413B5A, #29243B); color: #fff; border-color: #29243B; box-shadow: 0 4px 0 #1c1830, 0 8px 16px var(--shadow); }

.comet, .fleer, .hunter {
  position: absolute; left: 0; top: 0;
  width: calc(100% / var(--n)); height: calc(100% / var(--n));
  transition: transform .5s cubic-bezier(.35, .9, .3, 1);
  pointer-events: none; z-index: 4; display: grid; place-items: center;
}
.comet svg, .fleer svg { width: 82%; height: 82%; filter: drop-shadow(0 3px 8px rgba(217, 119, 6, .55)); }
.fleer svg { animation: twinkle 1.4s ease-in-out infinite; }
/* Ideogram şeffaf tahta simgeleri */
.sq img.star { position: absolute; inset: 11%; width: 78%; height: 78%; object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(217, 119, 6, .5)); animation: twinkle 1.6s ease-in-out infinite; }
.sq img.star.pop { animation: starpop .55s ease-out forwards; }
.comet .cometart, .fleer .fleerart { width: 96%; height: 96%; object-fit: contain;
  filter: drop-shadow(0 3px 7px rgba(217, 119, 6, .5)); }
.fleer .fleerart { animation: twinkle 1.4s ease-in-out infinite; }
.fleer.caughtpop { animation: starpop .5s ease-out forwards; }
.hunter svg { width: 80%; height: 80%; filter: drop-shadow(0 4px 10px rgba(110, 45, 79, .5)); animation: hunterbob 1.8s ease-in-out infinite; }
@keyframes hunterbob { 50% { transform: translateY(-7%); } }
.sq.huntnext { outline: 3px dashed rgba(255, 107, 94, .65); outline-offset: -5px; }

/* markalı sürpriz güç kutusu (bilsemc2 / beyninikullan) */
.sq .bonus {
  position: absolute; inset: 9%; z-index: 5; border-radius: 24%;
  background: #fff; display: grid; place-items: center; overflow: hidden;
  box-shadow: 0 0 0 3px var(--sun), 0 3px 8px var(--shadow);
  animation: bonuspulse 1.1s ease-in-out infinite;
}
.sq .bonus.bonus-repel { box-shadow: 0 0 0 3px var(--grape), 0 3px 8px var(--shadow); }
.sq .bonus img { width: 90%; height: 90%; object-fit: contain; }
@keyframes bonuspulse { 50% { transform: scale(.9); box-shadow: 0 0 0 5px rgba(255,170,31,.5), 0 3px 8px var(--shadow); } }

/* dondurulmuş düşman: belirgin buz küpü + donmuş (animasyonlar durur) */
.comet.frozen svg, .comet.frozen img,
.fleer.frozen svg, .fleer.frozen img,
.hunter.frozen svg { animation: none !important; filter: saturate(.5) brightness(1.05) hue-rotate(-8deg); }
/* üretilmiş buz küpü görseli varsa CSS buz katmanını kullanma (çift olmasın) */
.frozenart { width: 96%; height: 96%; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(90,160,220,.5)); }
.comet.frozen:has(.frozenart)::after, .fleer.frozen:has(.frozenart)::after, .hunter.frozen:has(.frozenart)::after,
.comet.frozen:has(.frozenart)::before, .fleer.frozen:has(.frozenart)::before, .hunter.frozen:has(.frozenart)::before { display: none; }
.comet.frozen::after, .fleer.frozen::after, .hunter.frozen::after {
  content: ''; position: absolute; inset: 3%; z-index: 3; border-radius: 22%;
  background:
    linear-gradient(135deg, rgba(255,255,255,.55) 0%, transparent 32%),
    linear-gradient(160deg, rgba(196,234,255,.72), rgba(122,196,246,.55) 55%, rgba(205,240,255,.74));
  border: 2px solid rgba(255,255,255,.92);
  box-shadow: inset 0 2px 7px rgba(255,255,255,.95), inset 0 -3px 9px rgba(90,160,220,.5), 0 0 12px rgba(120,200,255,.75);
  pointer-events: none; animation: icesheen 1.8s ease-in-out infinite;
}
/* köşe buz kristalleri */
.comet.frozen::before, .fleer.frozen::before, .hunter.frozen::before {
  content: ''; position: absolute; inset: 3%; z-index: 4; pointer-events: none;
  background:
    radial-gradient(circle at 22% 20%, #fff 0 8%, transparent 9%),
    radial-gradient(circle at 78% 30%, rgba(255,255,255,.9) 0 6%, transparent 7%),
    radial-gradient(circle at 68% 78%, #fff 0 7%, transparent 8%);
}
@keyframes icesheen { 50% { box-shadow: inset 0 2px 9px rgba(255,255,255,1), inset 0 -3px 9px rgba(90,160,220,.6), 0 0 18px rgba(150,215,255,.95); } }

/* kötü sihirbaz: merkeze poof + büyü */
.wizard-pop {
  position: absolute; left: 50%; top: 42%; width: 34%; z-index: 15;
  transform: translate(-50%, -50%); pointer-events: none;
  filter: drop-shadow(0 6px 14px rgba(74, 58, 140, .6));
  animation: wizardpop 1.5s ease-out forwards;
}
.wizard-pop svg, .wizard-pop img { width: 100%; height: auto; }
.wizard-pop.fizzle { animation: wizardfizzle 1.5s ease-out forwards; }
@keyframes wizardpop {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(.4) rotate(-12deg); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.1) rotate(4deg); }
  70% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-2deg); }
  100% { opacity: 0; transform: translate(-50%, -60%) scale(.9); }
}
@keyframes wizardfizzle {
  0% { opacity: 0; transform: translate(-50%, -40%) scale(.5); }
  25% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  45% { opacity: .5; filter: grayscale(.7) drop-shadow(0 0 10px #9adcff); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(.6) rotate(20deg); }
}
#hero .inner.immune-glow { animation: immuneglow .9s ease-out; }
@keyframes immuneglow { 0%,100% { filter: none; } 40% { filter: drop-shadow(0 0 10px #ffe08a) drop-shadow(0 0 18px var(--sun)); } }
#board.freezeflash { animation: freezeflash .7s ease-out; }
@keyframes freezeflash { 0% { box-shadow: 0 0 0 6px rgba(154,220,255,.9), 0 18px 44px var(--shadow); } 100% { box-shadow: 0 0 0 2px #F1E2C6, 0 18px 44px var(--shadow); } }
.hunter.zapback { animation: zapback .6s ease-in-out; }
@keyframes zapback { 0%,100% { filter: none; } 40% { filter: brightness(2) drop-shadow(0 0 12px var(--grape)); } }

/* sis: keşfedilmemiş kareler — süt beyazı bulut */
.sq .fog {
  position: absolute; inset: -2%; z-index: 6; border-radius: 6px;
  background: radial-gradient(circle at 32% 36%, #FBF7FF 0%, #E9E1F6 55%, #D6CCEC 100%);
  box-shadow: inset 0 0 12px rgba(122, 107, 174, .25);
  animation: fogdrift 4s ease-in-out infinite;
}
.sq .fog.lift { animation: fogout .8s ease-out forwards; }
@keyframes fogdrift { 50% { filter: brightness(1.05); } }
@keyframes fogout { to { opacity: 0; transform: scale(1.35); } }

/* buz: durulmayan kaygan zemin */
.sq.iced.light { background: linear-gradient(135deg, #DFF3FF 0%, #B4E0FA 55%, #DFF3FF 100%); }
.sq.iced.dark { background: linear-gradient(135deg, #B9DFF6 0%, #8FC6E8 55%, #B9DFF6 100%); }
.sq.iced::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .85) 40%, transparent 48%);
  pointer-events: none;
}

/* sihirli kapılar */
.sq .portal {
  position: absolute; inset: 12%; border-radius: 50%;
  border: 4px solid #29C4FF;
  box-shadow: 0 0 12px rgba(41, 196, 255, .7), inset 0 0 10px rgba(41, 196, 255, .5);
  animation: portalspin 2.6s linear infinite;
}
.sq .portal.p1 {
  border-color: #FF6BD6;
  box-shadow: 0 0 12px rgba(255, 107, 214, .7), inset 0 0 10px rgba(255, 107, 214, .5);
}
.sq .portal::after {
  content: ''; position: absolute; inset: 18%;
  border-radius: 50%; border: 3px dashed rgba(255, 255, 255, .9);
}
@keyframes portalspin { to { transform: rotate(360deg); } }
#hero .inner.warpblink { animation: warpblink .3s ease-in-out; }
@keyframes warpblink { 0% { transform: scale(1); } 50% { transform: scale(0) rotate(180deg); } 100% { transform: scale(1); } }

/* Sihirli Değişim: kahraman etrafında taş çemberi */
.tf-ring { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
.tf-opt {
  position: absolute; left: 50%; top: 50%; width: 66%; aspect-ratio: 1;
  transform: translate(-50%, -50%) translate(var(--x), var(--y));
  background: #fff; border: 3px solid var(--sun-deep); border-radius: 50%;
  padding: 12%; box-shadow: 0 4px 10px var(--shadow), 0 0 14px rgba(255,170,31,.6);
  cursor: pointer; pointer-events: auto;
  animation: tfpop .28s cubic-bezier(.3,1.6,.4,1) backwards;
  display: grid; place-items: center;
}
.tf-opt svg, .tf-opt img { width: 100%; height: 100%; object-fit: contain; color: var(--ink); filter: drop-shadow(0 1px 2px rgba(0,0,0,.18)); }
.tf-opt.cur { border-color: var(--mint); box-shadow: 0 4px 10px var(--shadow), 0 0 14px rgba(62,207,165,.7); }
.tf-opt.dead { filter: saturate(.2) brightness(.9) opacity(.5); pointer-events: none; box-shadow: 0 3px 7px var(--shadow); border-color: #ccc; }
.tf-opt:not(.dead):hover { transform: translate(-50%, -50%) translate(var(--x), var(--y)) scale(1.5); z-index: 6; border-color: var(--sun); box-shadow: 0 8px 18px var(--shadow), 0 0 20px rgba(255,170,31,.85); }
/* taşın Türkçe adı: normalde gizli, üzerine gelince altında pill olarak belirir */
.tf-name {
  position: absolute; top: 100%; left: 50%; margin-top: 5px;
  transform: translate(-50%, 1px); transform-origin: center top;
  background: var(--ink); color: #fff; font-weight: 800; line-height: 1;
  font-size: clamp(8px, 2vw, 12px); letter-spacing: .2px;
  padding: 4px 8px; border-radius: 999px; white-space: nowrap;
  opacity: 0; pointer-events: none; box-shadow: 0 3px 8px var(--shadow);
  transition: opacity .15s ease, transform .15s ease;
}
.tf-opt:hover .tf-name { opacity: 1; transform: translate(-50%, 4px); }
@keyframes tfpop { from { transform: translate(-50%, -50%) scale(0); opacity: 0; } }

/* kahraman taş: altın oyuncak */
#hero {
  position: absolute; left: 0; top: 0;
  width: calc(100% / var(--n)); height: calc(100% / var(--n));
  transition: transform .5s cubic-bezier(.35, .9, .3, 1);
  pointer-events: none; z-index: 5;
}
#hero .inner { width: 100%; height: 100%; display: grid; place-items: center; }
#hero svg {
  width: 78%; height: 78%; color: #FFCE54;
  filter: drop-shadow(0 0 2px rgba(120, 70, 10, .55)) drop-shadow(0 4px 6px var(--shadow));
}
/* Ideogram şeffaf taş: ince koyu kontur (açık karede okunur) + zemin gölgesi */
#hero .board-piece {
  width: 90%; height: 90%; object-fit: contain;
  filter: drop-shadow(0 0 1.5px rgba(40, 25, 10, .85))
          drop-shadow(0 1px 0 rgba(40, 25, 10, .5))
          drop-shadow(0 5px 5px rgba(0, 0, 0, .3));
}
#hero .inner.morph { animation: morph .4s ease-out; }
@keyframes morph { 0% { transform: scale(.5); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
#hero .inner.hop { animation: hop .5s ease-in-out; }
@keyframes hop { 40% { transform: translateY(-55%) scale(1.15); } 100% { transform: translateY(0); } }

/* ---------- Güç çipleri + toast ---------- */
#chips { display: flex; gap: .5rem; padding: .3rem 0; min-height: 2.6rem; }
.chip {
  display: flex; align-items: center; gap: .4rem;
  background: #fff; color: var(--ink); border: none;
  border-radius: 999px; padding: .38em .95em .38em .65em; font-size: .88rem; font-weight: 900;
  box-shadow: 0 4px 0 #E8D9BF, 0 8px 14px var(--shadow);
  text-shadow: none;
}
.chip svg { width: 1.25em; height: 1.25em; color: var(--sun-deep); }
.chip:active { box-shadow: 0 1px 0 #E8D9BF; }
.chip.spent { opacity: .35; pointer-events: none; filter: saturate(.3); }
.chip.armed {
  background: linear-gradient(#FFC24C, var(--sun-deep)); color: #fff;
  box-shadow: 0 4px 0 var(--sun-dark), 0 0 18px rgba(255, 170, 31, .7);
}
.chip.armed svg { color: #fff; }

/* İmza güç tepsisi: yıldızı alan taşın kazandığı güçler (parlar, dokun-ateşle) */
#sigtray { display: flex; gap: .5rem; padding: .1rem 0 .2rem; justify-content: center; flex-wrap: wrap; }
#sigtray:not(.has) { display: none; }
.sigbtn {
  display: flex; align-items: center; gap: .4rem;
  background: linear-gradient(#FFF6E4, #FFE7B8); color: var(--ink);
  border: 2.5px solid var(--sun); border-radius: 999px;
  padding: .28em .85em .28em .35em; font-size: .84rem; font-weight: 900; cursor: pointer;
  box-shadow: 0 4px 10px var(--shadow), 0 0 16px rgba(255, 170, 31, .55);
  animation: sigpop .32s cubic-bezier(.3, 1.6, .4, 1) backwards, sigglow 1.5s ease-in-out infinite;
}
.sigbtn:active { transform: translateY(1px); }
.sig-ic { width: 1.8em; height: 1.8em; display: grid; place-items: center; flex: 0 0 auto;
  background: #fff; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 170, 31, .5); }
.sig-ic img, .sig-ic svg { width: 84%; height: 84%; object-fit: contain; }
.sigbtn.shield-badge { border-color: var(--mint); cursor: default; animation: sigpop .32s cubic-bezier(.3,1.6,.4,1) backwards;
  box-shadow: 0 4px 10px var(--shadow), 0 0 16px rgba(62, 207, 165, .6); background: linear-gradient(#EAFBF4, #CFF3E6); }
.sigbtn.shield-badge .sig-ic { box-shadow: inset 0 0 0 2px rgba(62, 207, 165, .55); }
@keyframes sigpop { from { transform: scale(0) translateY(6px); opacity: 0; } }
@keyframes sigglow { 50% { box-shadow: 0 4px 10px var(--shadow), 0 0 24px rgba(255, 170, 31, .9); } }

/* Kral Kalkanı: kahramanın çevresinde nabız gibi atan kalkan halesi */
#hero .inner.shielded { position: relative; filter: drop-shadow(0 0 5px #ffd86b) drop-shadow(0 0 9px rgba(62, 207, 165, .85)); }
#hero .inner.shielded::after {
  content: ''; position: absolute; inset: -10%; border-radius: 50%;
  border: 3px solid rgba(62, 207, 165, .85); box-shadow: 0 0 12px rgba(62, 207, 165, .7);
  animation: shieldpulse 1.4s ease-in-out infinite; pointer-events: none;
}
@keyframes shieldpulse { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.12); opacity: .5; } }

/* Şimşek Yol: satır/sütun karelerinde parlak sarı çakış */
.sq.bolt { box-shadow: inset 0 0 0 3px #ffd23f, 0 0 14px rgba(255, 210, 63, .8) !important; }
/* Kraliçe Fırtınası: donan düşmanlarda buzlu tonlama */
.comet.iced-emy img, .comet.iced-emy svg, .fleer.iced-emy img, .fleer.iced-emy svg, .hunter.iced-emy { filter: brightness(1.3) saturate(.4) hue-rotate(160deg) drop-shadow(0 0 6px #8fd8ff); }

/* Pati'ye karşı düello paneli: sen (sol) · Pati laf balonu (orta) · mini tahta (sağ) */
#duel-ai { display: none; }
#duel-ai.on {
  display: flex; align-items: center; gap: .6rem; width: min(94vw, 460px); margin: .1rem auto .3rem;
  background: linear-gradient(#fff, #F7EFFF); border: 2.5px solid var(--grape, #7A4FC0);
  border-radius: 16px; padding: .4rem .6rem; box-shadow: 0 4px 0 #E3D3F2, 0 8px 16px var(--shadow);
}
.da-side { display: flex; flex-direction: column; align-items: center; gap: .15rem; flex: 0 0 auto; }
.da-lab { font-size: .7rem; font-weight: 800; color: var(--ink-soft); }
.da-score { font-size: 1.15rem; font-weight: 900; color: var(--ink); line-height: 1; }
.da-score.me { color: var(--sun-deep); }
.da-score.ai { color: var(--grape, #7A4FC0); }
.da-center { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .2rem; min-width: 0; }
.da-pati { display: flex; align-items: center; gap: .3rem; }
.da-cat { width: 1.7rem; height: 1.7rem; }
.da-name { font-weight: 900; color: var(--grape, #7A4FC0); font-size: .9rem; }
.da-bubble {
  background: #fff; border: 2px solid #E3D3F2; border-radius: 12px; padding: .25rem .55rem;
  font-size: .74rem; font-weight: 700; color: var(--ink); text-align: center; line-height: 1.25;
  max-width: 100%; box-shadow: 0 2px 5px var(--shadow); animation: dabub .3s ease;
}
@keyframes dabub { from { transform: scale(.85); opacity: .4; } }
.da-mini { width: 3.4rem; height: 3.4rem; border-radius: 8px; box-shadow: 0 2px 6px var(--shadow); display: block; }
#btn-duel { border-color: var(--grape, #7A4FC0); }

/* Koç Kedi barı: sıcak turuncu yoldaş — avatar · laf balonu · İpucu düğmesi */
#coach { display: none; }
#coach.on {
  display: flex; align-items: center; gap: .5rem; width: min(94vw, 460px); margin: .1rem auto .3rem;
  background: linear-gradient(#fff, #FFF4E4); border: 2.5px solid var(--sun);
  border-radius: 16px; padding: .35rem .5rem; box-shadow: 0 4px 0 #F0E2C8, 0 8px 16px var(--shadow);
}
.coach-av { flex: 0 0 auto; width: 2.2rem; height: 2.2rem; padding: 0; border: none; background: none; cursor: pointer; }
.coach-cat { width: 100%; height: 100%; }
.coach-body { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.coach-name { font-size: .7rem; font-weight: 900; color: var(--sun-deep); line-height: 1; }
.coach-bubble { font-size: .8rem; font-weight: 700; color: var(--ink); line-height: 1.25; animation: dabub .3s ease; }
.coach-hint {
  flex: 0 0 auto; border: 2px solid var(--sun); background: linear-gradient(#FFC24C, var(--sun-deep));
  color: #fff; font-weight: 900; font-size: .78rem; border-radius: 999px; padding: .3em .8em; cursor: pointer;
  box-shadow: 0 3px 8px var(--shadow); text-shadow: 0 1px 1px rgba(0,0,0,.15);
}
.coach-hint:active { transform: translateY(1px); }
#btn-coach.toggle.on { background: linear-gradient(#FFF3D6, #FFE3A8); border-color: var(--sun); }

#toast {
  position: fixed; left: 50%; top: 30%; transform: translateX(-50%) translateY(-16px) scale(.9);
  display: inline-flex; align-items: center; gap: .6em;
  background: #fff; border: 4px solid var(--sun); color: var(--ink);
  padding: .75em 1.5em; border-radius: 22px; font-weight: 900; font-size: 1.25rem;
  box-shadow: 0 8px 0 #E8C88a, 0 18px 40px var(--shadow);
  opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s cubic-bezier(.3,1.5,.4,1); z-index: 60;
  max-width: 88vw; text-align: center;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
#toast .toast-ic { width: 1.9em; height: 1.9em; flex: none; display: grid; place-items: center; }
#toast .toast-ic svg { width: 100%; height: 100%; }
#toast .toast-ic img { width: 100%; height: 100%; object-fit: contain; } /* taş asset'i toast'ta küçük kalsın */
#toast .toast-ic svg.star { color: var(--sun); }

/* ---------- Kart eli ---------- */
#hand {
  display: flex; justify-content: center; align-items: flex-end;
  height: clamp(120px, 21vh, 185px); padding-bottom: .5rem; width: 100%;
}
.card {
  width: clamp(84px, 15vh, 118px); aspect-ratio: 3/4.2;
  background: linear-gradient(#FFFDF7, #FFF3DC);
  border: 3px solid #F3BE68; border-radius: 14px;
  margin: 0 -.55rem; position: relative; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: .45rem .3rem .4rem;
  box-shadow: 0 8px 18px var(--shadow);
  transition: transform .22s cubic-bezier(.3, .9, .4, 1.2), box-shadow .22s;
  transform: rotate(var(--tilt)) translateY(var(--drop));
  color: var(--ink);
}
.card .pc { width: 46%; height: auto; color: var(--ink); }
.card .pc-art {
  width: 74%; aspect-ratio: 3/2; object-fit: contain;
  border-radius: 10px;
  filter: drop-shadow(0 3px 5px var(--shadow));
}
.card .adname { font-weight: 900; font-size: .92rem; letter-spacing: .02em; }
.card .pattern { width: 74%; height: auto; }
.card .verb { font-size: .68rem; font-weight: 800; color: #C08A2D; text-transform: uppercase; letter-spacing: .12em; }
.card:hover, .card.selected {
  transform: rotate(0deg) translateY(calc(var(--drop) - 26px)) scale(1.06); z-index: 10;
}
.card.selected {
  border-color: var(--sun-deep);
  box-shadow: 0 0 0 4px rgba(255, 170, 31, .45), 0 14px 28px var(--shadow);
}
.card.dead { filter: saturate(.2) brightness(.92) opacity(.75); }
.card.nudge { animation: nudge .7s ease-in-out 3; }
@keyframes nudge { 30% { transform: rotate(var(--tilt)) translateY(calc(var(--drop) - 18px)); } }
/* altın güç kartları */
.card.power {
  background: linear-gradient(#FFE9B0, #FFC24C);
  border-color: var(--sun-dark);
}
.card.power .pw-icon { width: 42%; margin-top: .2rem; color: var(--sun-dark); }
.card.power .pw-icon svg { width: 100%; height: auto; filter: drop-shadow(0 2px 3px rgba(160,80,0,.35)); }
.card.power .pw-icon .pw-art { width: 118%; height: auto; margin: -6% 0; filter: drop-shadow(0 3px 4px rgba(160,80,0,.35)); }
.card.power .adname { color: #7A4A00; }
.card.power .pw-desc {
  font-size: .58rem; font-weight: 700; color: #8A5A10; line-height: 1.25;
  text-align: center; padding: 0 .2rem;
}
.card.power .verb { color: #7A4A00; }
.card.power .pw-cost {
  display: flex; align-items: center; gap: .25em;
  font-size: .7rem; font-weight: 900; color: #7A4A00;
}
.card.power .pw-cost svg.cost-star { width: 1.1em; height: 1.1em; color: var(--sun-dark); }
.card.power.selected { box-shadow: 0 0 0 4px rgba(255, 138, 0, .6), 0 14px 28px var(--shadow); }

/* güç hedefleme: kayalar ve itme yönleri */
.sq.pw-rock { cursor: pointer; outline: 4px dashed var(--mint); outline-offset: -6px; }
.sq.pw-rock::after {
  content: ''; position: absolute; inset: 4%;
  background: radial-gradient(circle, rgba(62, 207, 165, .3) 0%, transparent 70%);
  animation: breathe 1.1s ease-in-out infinite; pointer-events: none;
}
.sq.pw-dest { cursor: pointer; }
.sq.pw-dest::after {
  content: ''; position: absolute; inset: 22%; border-radius: 50%;
  background: radial-gradient(circle, rgba(62, 207, 165, .8) 0%, rgba(62, 207, 165, .25) 60%, transparent 75%);
  box-shadow: inset 0 0 0 3px var(--mint);
  animation: breathe 1s ease-in-out infinite;
}
.sq svg.rock.ghost { opacity: .45; filter: drop-shadow(0 0 8px rgba(77, 184, 255, .8)); animation: ghostrock 1.6s ease-in-out infinite; }
@keyframes ghostrock { 50% { opacity: .25; transform: translateY(-4%); } }
#board.shake { animation: boardshake .4s ease-in-out; }
@keyframes boardshake {
  20% { transform: translate(-7px, 2px) rotate(-.6deg); }
  45% { transform: translate(6px, -2px) rotate(.5deg); }
  70% { transform: translate(-4px, 1px); }
}

.card.dealt { animation: dealt .35s ease-out backwards; }
@keyframes dealt { from { transform: translateY(120px) rotate(14deg); opacity: 0; } }
.card.flyaway { transition: transform .45s ease-in, opacity .45s; transform: translateY(-42vh) scale(.45) rotate(8deg) !important; opacity: 0; z-index: 20; pointer-events: none; }

/* ---------- Panel / overlay ---------- */
.overlay {
  position: fixed; inset: 0; display: none; place-items: center;
  background: rgba(255, 243, 224, .55); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  z-index: 50; padding: 1rem;
}
.overlay.active { display: grid; }
.panel {
  background: #fff; border: none;
  border-radius: 26px; padding: 2rem 2.2rem; text-align: center;
  width: min(92vw, 430px);
  box-shadow: 0 6px 0 #F0E2C8, 0 30px 70px var(--shadow);
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  animation: panelin .35s cubic-bezier(.3, 1.2, .4, 1);
}
@keyframes panelin { from { transform: scale(.7); opacity: 0; } }
.panel h2 {
  color: var(--sun-deep); font-size: 1.7rem; transform: rotate(-1deg);
  text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff;
}
.panel .big-svg { width: clamp(70px, 16vmin, 110px); color: var(--ink); filter: drop-shadow(0 6px 14px var(--shadow)); }
.panel p { color: var(--ink-soft); font-size: 1.05rem; line-height: 1.45; font-weight: 600; }
.panel .pattern { width: min(60vw, 230px); }
.panel .stars-row { display: flex; gap: .6rem; }
.panel .stars-row svg { width: 2.6rem; color: var(--sun); filter: drop-shadow(0 3px 8px rgba(217, 119, 6, .5)); animation: winstar .5s cubic-bezier(.3, 1.4, .4, 1) backwards; }
.panel .stars-row svg:nth-child(2) { animation-delay: .15s; }
.panel .stars-row svg:nth-child(3) { animation-delay: .3s; }
@keyframes winstar { from { transform: scale(0) rotate(-40deg); } }
.power-art {
  width: min(58vw, 240px); border-radius: 20px;
  border: 6px solid #fff;
  outline: 2px solid #F1E2C6;
  box-shadow: 0 14px 34px var(--shadow);
  transform: rotate(-1.5deg);
}
#win-art {
  width: min(70vw, 300px); border-radius: 18px;
  border: 5px solid #fff; outline: 2px solid #F1E2C6;
  box-shadow: 0 12px 30px var(--shadow);
  margin-bottom: -0.3rem;
}

/* güç ekranı deseni: noktalar sırayla yanar */
.panel .pattern .dot { animation: dotwave 1.6s ease-in-out infinite; }
@keyframes dotwave { 0%, 100% { opacity: .35; } 30% { opacity: 1; } }

/* ---------- Günün Hediyesi sandığı ---------- */
#gift-card {
  width: 100%; margin-top: .9rem; border: none; border-radius: 20px; padding: .7rem .8rem; cursor: pointer; text-shadow: none;
  background: #fff; box-shadow: 0 4px 0 #EBD9B6, 0 8px 14px var(--shadow);
  display: flex; align-items: center; gap: .7rem; text-align: left;
}
#gift-card:active { transform: translateY(2px); box-shadow: 0 2px 0 #EBD9B6, 0 4px 8px var(--shadow); }
.gift-ic { width: 2.7rem; height: 2.7rem; border-radius: 14px; flex: none; display: grid; place-items: center; background: #F1E7CF; color: #B98A2E; }
.gift-ic svg { width: 1.7rem; height: 1.7rem; }
.gift-lab { display: flex; flex-direction: column; line-height: 1.14; }
.gift-lab b { font-size: 1rem; font-weight: 900; color: var(--ink); }
#gift-sub { font-size: .76rem; font-weight: 800; color: var(--ink-soft); }
.gift-go { margin-left: auto; font-weight: 900; font-size: .95rem; color: var(--sun-dark); background: #FFF0D2; border-radius: 999px; padding: .28rem .72rem; display: flex; align-items: center; }
.gift-go:empty { display: none; }
/* açılabilir: altın parıltı + hafif nabız — dikkat çeker */
#gift-card.ready { background: linear-gradient(180deg, #FFF6E4, #FFEFD0);
  box-shadow: 0 4px 0 #EBD9B6, 0 8px 14px var(--shadow), 0 0 0 2px #FFCE6A, 0 0 22px rgba(255, 178, 44, .55);
  animation: giftpulse 1.8s ease-in-out infinite; }
#gift-card.ready .gift-ic { background: linear-gradient(150deg, #FFC24C, var(--sun-deep)); color: #fff; box-shadow: 0 3px 8px rgba(217, 119, 6, .4); }
@keyframes giftpulse { 50% { box-shadow: 0 4px 0 #EBD9B6, 0 8px 14px var(--shadow), 0 0 0 2px #FFD98A, 0 0 30px rgba(255, 178, 44, .85); } }
#gift-card.claimed { opacity: .66; }
#gift-card.claimed .gift-ic { filter: grayscale(.5); }

/* ---------- Profil / avatar ekranı ---------- */
.pf-panel { gap: .8rem; }
#pf-av { width: 4.4rem; height: 4.4rem; border-radius: 20px; color: #fff;
  background: linear-gradient(150deg, #9166D6, #6A3FB4); display: grid; place-items: center;
  box-shadow: 0 4px 0 #55309a, 0 8px 16px var(--shadow); }
#pf-av svg { width: 2.9rem; height: 2.9rem; }
#pf-rank { font-size: .85rem; font-weight: 900; color: var(--grape); margin-top: -.5rem; }
#pf-stats { width: 100%; }
#pf-stats .rw-grid { width: 100%; margin-bottom: 0; grid-template-columns: repeat(2, 1fr); gap: .55rem; }
#pf-stats .rw-card { padding: .7rem .5rem; }
#pf-stats .rw-big { font-size: 1.3rem; }
#pf-stats .rw-lab { font-size: .72rem; }
#pf-stats .flame { width: 1em; height: 1em; color: var(--sun-deep); vertical-align: -.12em; }
#pf-stats .flame svg { width: 100%; height: 100%; }
.pf-pick-lab { font-weight: 900; font-size: .8rem; color: var(--ink-soft); align-self: flex-start; margin-top: .2rem; }
#pf-picker { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(42px, 1fr)); gap: .4rem; }
.pf-opt { border: none; cursor: pointer; aspect-ratio: 1; border-radius: 12px; background: #F3ECFA; color: #6A3FB4;
  display: grid; place-items: center; box-shadow: 0 2px 0 #DDD0F0; padding: 0; }
.pf-opt svg { width: 74%; height: 74%; }
.pf-opt.on { background: linear-gradient(150deg, #9166D6, #6A3FB4); color: #fff; box-shadow: 0 2px 0 #55309a, 0 0 0 2px #C9B4F0; }
.pf-opt:active { transform: translateY(2px); box-shadow: none; }

/* ---------- Ana ekran giriş animasyonu (kartlar sırayla belirir) ---------- */
#home-body.reveal > * { animation: homeReveal .5s cubic-bezier(.25, 1.3, .5, 1) backwards; }
#home-body.reveal > *:nth-child(1) { animation-delay: .02s; }
#home-body.reveal > *:nth-child(2) { animation-delay: .08s; }
#home-body.reveal > *:nth-child(3) { animation-delay: .14s; }
#home-body.reveal > *:nth-child(4) { animation-delay: .20s; }
#home-body.reveal > *:nth-child(5) { animation-delay: .27s; }
#home-body.reveal > *:nth-child(6) { animation-delay: .34s; }
#home-body.reveal > *:nth-child(7) { animation-delay: .41s; }
@keyframes homeReveal { from { opacity: 0; transform: translateY(16px) scale(.98); } }
/* avatarda ince nefes hareketi */
#avatar { animation: avbob 4.5s ease-in-out infinite; }
@keyframes avbob { 50% { transform: translateY(-2px) rotate(-3deg); } }

/* ---------- Hareket azaltma tercihi ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ---------- Masaüstü / geniş ekran ----------
   Oyun mobil-dikey tasarlandı. Geniş ekranda tüm ekranları ve alt sekmeyi
   telefon genişliğinde (480px) ortalanmış bir sütuna sabitle; kenarlar
   body::before arka planı olarak kalır. Böylece tahta minik kalmaz,
   koç/halka/alt butonlar sütunla hizalanır, çakışma olmaz. */
/* Dönüşüm halkası (Sihirli Değişim) açıkken üstteki koç/ipucu çubuğunu gizle —
   halka üst satırdaki taşın çevresine açılınca çubuğa taşıp çakışmasın. */
#screen-game:has(.tf-ring) #coach,
#screen-game:has(.tf-ring) #intro-line { display: none; }

@media (min-width: 700px) {
  .screen,
  #bunting {
    width: min(100vw, 480px);
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
  /* Tahta viewport'u değil sütunu baz alsın (92vw sütunu taşırıyordu). */
  #board { width: min(90vw, 52vh, 430px); }
  .screen.active {
    box-shadow: 0 22px 66px rgba(80, 50, 20, .14);
  }
}