/* Kaptan Harfi · Yer, Yön ve Konum — tam ekran yatay 16:9 */

.birles-uzam-overlay.is-yeryon {
  --yy-studio: #f6e0c0;
  background: #071016;
}
.birles-uzam-overlay.is-yeryon.is-embed {
  background: var(--yy-studio);
}
html.birles-yeryon-land,
body.birles-yeryon-land {
  overflow: hidden !important;
}
html.birles-yeryon-land #nova-portrait-lock,
body.birles-yeryon-land #nova-portrait-lock {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
html.birles-yeryon-land #nova_macera_exit_x,
body.birles-yeryon-land #nova_macera_exit_x,
html.birles-yeryon-land .nova-macera-exit-x,
body.birles-yeryon-land .nova-macera-exit-x {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.birles-uzam-overlay.is-embed .yy-land-turn {
  display: none !important;
}
.yy-land-turn {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  margin: 0;
  padding: 28px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  text-align: center;
  background: #071018;
  color: #fffbeb;
  font-family: "TemelYazi", "ComfortaaOkul", sans-serif;
  pointer-events: auto;
}
.yy-land-turn p {
  margin: 0;
  max-width: 22em;
  font-size: 1.05rem;
  line-height: 1.4;
  color: #ccfbf1;
}
.yy-land-turn strong,
.yy-land-turn p:first-child {
  font-size: clamp(1.35rem, 4.5vw, 2rem);
  font-weight: 900;
  color: #fde68a;
}
.harfim-ders-overlay .yy-land-turn,
.birles-uzam-overlay.is-embed .yy-land-turn,
html.birles-yeryon-land .yy-land-turn,
body.birles-yeryon-land .yy-land-turn {
  display: none !important;
}
@media (orientation: portrait) {
  html.birles-yeryon-land .yy-land-turn,
  body.birles-yeryon-land .yy-land-turn {
    display: none !important;
  }
  body.birles-yeryon-land.nova-duel-land-flow::before,
  html.birles-yeryon-land body.nova-duel-land-flow::before {
    content: none !important;
    display: none !important;
    background: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}
.birles-uzam--yeryon {
  padding: 0;
  color: #f8fafc;
  font-family: "TemelYazi", "ComfortaaOkul", "Segoe UI", sans-serif;
}
.birles-uzam-overlay.is-admin-edit.is-yeryon .birles-uzam--yeryon {
  width: calc(100% - min(300px, 34vw));
  height: calc(100% - 128px);
  min-height: 0 !important;
  max-height: calc(100% - 128px);
  padding: 0;
  overflow: hidden;
}
.birles-uzam-overlay.is-admin-edit.is-yeryon .birles-uzam__stage,
.birles-uzam-overlay.is-admin-edit.is-yeryon .birles-uzam-scene--yy {
  inset: 0;
  width: 100%;
  height: 100%;
}
.birles-uzam--yeryon .birles-uzam__close {
  top: max(8px, env(safe-area-inset-top));
  right: max(8px, env(safe-area-inset-right));
  z-index: 50;
  background: rgba(8, 16, 24, 0.55);
}
.birles-uzam--yeryon.birles-uzam--gate {
  background:
    linear-gradient(180deg, rgba(8, 16, 24, 0.42), rgba(8, 16, 24, 0.28) 42%, rgba(8, 16, 24, 0.55)),
    var(--yy-gate-art) center / cover no-repeat,
    #10232c;
}
.birles-uzam--yeryon.birles-uzam--gate .birles-uzam__intro {
  max-width: min(92vw, 720px);
}
.birles-uzam--yeryon .birles-uzam__intro-kicker {
  color: #fde68a;
  letter-spacing: 0.16em;
  font-size: 11px;
}
.birles-uzam--yeryon .birles-uzam__intro-title {
  font-family: "TemelYazi", "ComfortaaOkul", sans-serif;
  font-weight: 900;
  font-size: clamp(1.45rem, 4.2vw, 2.25rem);
  color: #fffbeb;
  text-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
}
.birles-uzam--yeryon .birles-uzam__intro-lead {
  color: #ccfbf1;
  font-size: clamp(0.95rem, 2vw, 1.15rem);
}
.birles-uzam--yeryon .birles-uzam__start {
  background: linear-gradient(180deg, #34d399, #0f766e);
  color: #ecfdf5;
  border: 0;
  box-shadow: 0 10px 24px rgba(15, 118, 110, 0.35);
}
.birles-uzam-overlay.is-yeryon.birles-uzam--gate .birles-uzam__intro-art,
.birles-uzam--yeryon.birles-uzam--gate .birles-uzam__intro-art {
  display: none !important;
}
.birles-uzam--yeryon .birles-uzam__intro-art .birles-uzam__talk,
.birles-uzam--yeryon .birles-uzam__intro-art .yy-kaptan-v,
.birles-uzam--yeryon .birles-uzam__intro-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.birles-uzam--yeryon .birles-uzam__stage {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  opacity: 1;
  transform: none;
}
.birles-uzam--yeryon .birles-uzam-scene--yy {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  align-content: stretch;
  justify-items: center;
  gap: 6px;
  padding: 8px 12px 10px;
  box-sizing: border-box;
  container-type: size;
  background: var(--yy-studio, #f6e0c0);
}
.birles-uzam--yeryon .birles-uzam__head {
  display: none;
}
.birles-uzam--yeryon .birles-uzam__kicker {
  color: #fde68a;
  font-size: 10px;
  letter-spacing: 0.12em;
}
.birles-uzam--yeryon .birles-uzam__title {
  display: none;
}
.birles-uzam--yeryon .birles-uzam__skip {
  top: max(8px, env(safe-area-inset-top));
  right: max(8px, env(safe-area-inset-right));
  bottom: auto;
  z-index: 32;
}
.birles-uzam--yeryon .birles-uzam__progress {
  position: absolute;
  top: 4px;
  bottom: auto;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  width: min(42%, 280px);
  pointer-events: none;
  opacity: 0.55;
}
.birles-uzam-overlay.is-embed.is-yeryon .birles-uzam__progress {
  display: none;
}
.birles-uzam--yeryon .birles-uzam__choices {
  display: none;
}

.birles-uzam--yeryon .yy-frame.birles-uzam__landframe {
  --yy-studio: #f6e0c0;
  --yy-band: 0px;
  grid-row: 3;
  position: relative;
  left: auto;
  top: auto;
  right: auto;
  bottom: auto;
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 16 / 9;
  transform: none;
  overflow: hidden;
  background: var(--yy-studio);
  border-radius: 12px;
  z-index: 10;
}
.birles-uzam-overlay.is-embed {
  overflow: hidden !important;
  overscroll-behavior: none;
}
.birles-uzam-overlay.is-embed .birles-uzam {
  min-height: 0 !important;
  height: 100% !important;
  width: 100%;
  max-height: 100%;
  padding: 0 !important;
  overflow: hidden;
  box-sizing: border-box;
}
.birles-uzam-overlay.is-embed .birles-uzam__stage {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
}
.birles-uzam-overlay.is-embed .yy-frame.birles-uzam__landframe {
  --yy-band: 0px;
  top: auto;
  left: auto;
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 16 / 9;
  transform: none;
  border-radius: 12px;
}
.birles-uzam-overlay.is-embed.is-yeryon .birles-uzam--yeryon.birles-uzam--gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-height: 0 !important;
  height: 100% !important;
  padding: 10px 18px 22px !important;
  box-sizing: border-box;
  background-size: cover;
  background-position: center;
}
.birles-uzam-overlay.is-embed.is-yeryon .birles-uzam__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  max-width: min(92%, 640px);
  max-height: none;
  overflow: visible;
  padding: 0;
  gap: 6px;
}
.birles-uzam-overlay.is-embed.is-yeryon .birles-uzam__intro-title {
  font-size: clamp(1.15rem, 3cqw, 1.75rem);
}
.birles-uzam-overlay.is-embed.is-yeryon .birles-uzam__start {
  flex-shrink: 0;
  margin-top: 8px;
  margin-bottom: 0;
  position: relative;
  z-index: 8;
}
.birles-uzam--yeryon .birles-uzam__start.is-ready,
.birles-uzam-overlay.is-embed.is-yeryon .birles-uzam__start.is-ready {
  background: linear-gradient(180deg, #ffe08a, #ffb703 50%, #fb8500);
  color: #042f2e;
  min-height: 54px;
  padding: 14px 36px;
  font-size: 1.22rem;
  letter-spacing: 0.02em;
}
.yy-world {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: var(--yy-studio, #f6e0c0);
}
.yy-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}
.yy-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      #f6e0c0 0%,
      rgba(246, 224, 192, 0.92) 2.5%,
      rgba(246, 224, 192, 0) 10%,
      rgba(246, 224, 192, 0) 90%,
      rgba(246, 224, 192, 0.92) 97.5%,
      #f6e0c0 100%
    ),
    linear-gradient(
      180deg,
      #f6e0c0 0%,
      rgba(246, 224, 192, 0.92) 3.5%,
      rgba(246, 224, 192, 0) 12%,
      rgba(246, 224, 192, 0) 86%,
      rgba(246, 224, 192, 0.78) 95%,
      #f6e0c0 100%
    );
}
.yy-frame::after {
  content: none;
}

.yy-sky,
.yy-glow,
.yy-ground,
.yy-prop,
.yy-orbit,
.yy-ball--a,
.yy-ball--b {
  display: none !important;
}

.yy-frame[data-yy-kaptan="hide"] .yy-kaptan {
  display: none !important;
}
.yy-kaptan {
  position: absolute;
  z-index: 8;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  transform: none;
}
.yy-frame[data-yy-kaptan="left"] .yy-kaptan {
  left: 6%;
  bottom: 24%;
  width: 16%;
  height: 50%;
}
.yy-frame[data-yy-kaptan="right"] .yy-kaptan {
  left: auto;
  right: 7%;
  bottom: 22%;
  width: 16.5%;
  height: 52%;
}
.yy-frame[data-yy-kaptan="center"] .yy-kaptan {
  left: 20%;
  bottom: 22%;
  width: 18%;
  height: 54%;
}
.yy-frame[data-yy-kaptan="grass"] .yy-kaptan {
  left: auto;
  right: 8%;
  bottom: 6%;
  width: 17%;
  height: 54%;
}
.yy-kaptan .birles-uzam__talk,
.yy-kaptan-v,
.yy-kaptan video,
.yy-kaptan img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 10px 10px rgba(20, 12, 4, 0.38));
}

.yy-ball--drag {
  position: relative;
  display: block;
  width: 108px;
  height: 108px;
  border-radius: 0;
  background: none !important;
  box-shadow: none !important;
  object-fit: contain;
  object-position: center;
  overflow: visible;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.38));
}

.yy-word {
  grid-row: 1;
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  z-index: 5;
  font-family: "TemelYazi", sans-serif;
  font-weight: 900;
  font-size: clamp(1.05rem, 2.4cqi, 1.55rem);
  letter-spacing: 0.04em;
  color: #fffbeb;
  text-shadow: 0 3px 0 #0f766e, 0 8px 22px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  white-space: normal;
  text-align: center;
  max-width: min(96%, 920px);
  line-height: 1.2;
  padding: 0.16em 0.7em;
  border-radius: 14px;
  background: rgba(8, 16, 24, 0.42);
}
.yy-passage {
  grid-row: 2;
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  z-index: 5;
  max-width: min(92%, 720px);
  padding: 0.4em 0.8em 0.45em;
  border-radius: 16px;
  background: rgba(255, 248, 231, 0.94);
  border: 3px solid #c47a2b;
  box-shadow: 0 6px 0 #8a4b16;
  color: #3b2410;
  font-family: "TemelYazi", "ComfortaaOkul", sans-serif;
  font-weight: 800;
  font-size: clamp(0.88rem, 1.9cqi, 1.18rem);
  line-height: 1.35;
  text-align: center;
  pointer-events: none;
}

.yy-slot {
  position: absolute;
  z-index: 9;
  min-width: 16%;
  min-height: 16%;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.yy-slot::after {
  content: none;
}
.yy-slot.is-hot,
.yy-slot.is-ok,
.yy-slot.is-bad {
  background: transparent;
  border: 0;
  box-shadow: none;
}
.yy-slot .birles-uzam__placed {
  width: 72%;
  margin: 8% auto 0;
  pointer-events: none;
}
.yy-slot .birles-uzam__placed .yy-ball--drag {
  width: 118px;
  height: 118px;
  max-width: 100%;
}
.yy-frame[data-yy-set="table"] .yy-slot[data-slot="over"] {
  left: 14%;
  top: 35%;
  bottom: auto;
  width: 28%;
  height: 14%;
  border-radius: 50%;
}
.yy-frame[data-yy-set="table"] .yy-slot[data-slot="under"] {
  left: 18%;
  top: 51%;
  bottom: auto;
  width: 22%;
  height: 36%;
}
.yy-frame[data-yy-set="sides"] .yy-slot[data-slot="right"] {
  left: 0;
  right: auto;
  top: 36%;
  bottom: auto;
  width: 44%;
  height: 58%;
}
.yy-frame[data-yy-set="sides"] .yy-slot[data-slot="left"] {
  left: 58%;
  right: auto;
  top: 36%;
  bottom: auto;
  width: 42%;
  height: 58%;
}
.yy-frame[data-yy-set="sides"] .yy-slot .birles-uzam__placed {
  position: absolute;
  width: 118px;
  margin: 0;
  bottom: 12%;
}
.yy-frame[data-yy-set="sides"] .yy-slot[data-slot="right"] .birles-uzam__placed {
  right: 10%;
  left: auto;
}
.yy-frame[data-yy-set="sides"] .yy-slot[data-slot="left"] .birles-uzam__placed {
  left: 10%;
  right: auto;
}

.yy-dock {
  grid-row: 4;
  position: relative;
  left: auto;
  bottom: auto;
  transform: none;
  z-index: 50;
  justify-self: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  pointer-events: auto;
  overflow: visible;
}
.yy-dock p {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  color: #3f2a14;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}
.yy-drag {
  width: 112px;
  height: 112px;
  display: grid;
  place-items: center;
  cursor: grab;
  touch-action: none;
  border-radius: 0;
  background: none;
  overflow: visible;
  pointer-events: auto;
  z-index: 50;
}
.yy-drag.is-dragging,
.yy-dock.is-lifted .yy-drag {
  opacity: 0 !important;
  visibility: hidden !important;
}
.yy-dock.is-gone,
.yy-dock[hidden],
.yy-drag.is-gone,
.yy-drag[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.birles-uzam-overlay.is-yeryon .birles-uzam__ghost-img {
  filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.45));
}

.yy-hot {
  position: absolute;
  z-index: 11;
  min-width: 12%;
  min-height: 14%;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  pointer-events: auto;
  -webkit-appearance: none;
  appearance: none;
}
.yy-hot span {
  display: none !important;
}
.yy-hot[data-hot="in"] {
  left: 34%;
  top: 34%;
  bottom: auto;
  width: 26%;
  height: 38%;
}
.yy-hot[data-hot="out"] {
  left: 2%;
  top: 52%;
  bottom: auto;
  width: 22%;
  height: 40%;
}
.yy-hot[data-hot="front"] {
  left: 42%;
  top: 54%;
  bottom: auto;
  width: 34%;
  height: 42%;
}
.yy-hot[data-hot="back"] {
  left: 46%;
  top: 18%;
  bottom: auto;
  width: 22%;
  height: 28%;
}
.yy-hot[data-hot="high"] {
  left: 54%;
  top: 4%;
  width: 28%;
  height: 32%;
}
.yy-hot[data-hot="low"] {
  left: 54%;
  top: 56%;
  bottom: auto;
  width: 28%;
  height: 36%;
}
.yy-hot[data-hot="near"] {
  left: 28%;
  top: 42%;
  bottom: auto;
  width: 32%;
  height: 48%;
}
.yy-hot[data-hot="far"] {
  left: 64%;
  top: 42%;
  bottom: auto;
  width: 24%;
  height: 40%;
}
.yy-frame[data-yy-set="ball"] .yy-hot[data-hot="top"] {
  left: 17%;
  top: 40%;
  width: 30%;
  height: 52%;
  border-radius: 50%;
}
.yy-frame[data-yy-set="kitchen"] .yy-hot[data-hot="tabak"] {
  left: 1%;
  top: 46%;
  width: 20%;
  height: 32%;
  border-radius: 50%;
}
.birles-uzam-scene--yy.is-hot-tap .yy-picks {
  display: none !important;
}
.yy-frame[data-yy-set="ball"] .yy-hot[data-hot="top"],
.yy-frame[data-yy-set="kitchen"] .yy-hot[data-hot="tabak"] {
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.35);
  animation: yy-hot-pulse 1.7s ease-out infinite;
}
.yy-hot.is-ok {
  animation: none;
  box-shadow: 0 0 0 6px rgba(52, 211, 153, 0.55);
}
@keyframes yy-hot-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 248, 220, 0.55);
  }
  70% {
    box-shadow: 0 0 0 18px rgba(255, 248, 220, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 248, 220, 0);
  }
}

.yy-path {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 8;
  pointer-events: none;
}
.yy-cell,
.yy-pawn {
  display: none !important;
}
.yy-path-ball {
  position: absolute;
  width: 10.4%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  z-index: 8;
  bottom: 23%;
  margin: 0;
  filter: drop-shadow(0 10px 14px rgba(47, 28, 12, 0.38));
  transition: left 0.55s cubic-bezier(0.22, 0.82, 0.22, 1);
  pointer-events: none;
  user-select: none;
}
.yy-path-ball[data-at="0"] {
  left: 36%;
}
.yy-path-ball[data-at="1"] {
  left: 51%;
}
.yy-path-ball[data-at="2"] {
  left: 64.5%;
}
.yy-path-ball[data-at="3"] {
  left: 78.5%;
}
.yy-picks {
  grid-row: 4;
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  transform: none;
  z-index: 22;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  grid-auto-rows: auto;
  grid-template-columns: none;
  align-items: stretch;
  justify-items: stretch;
  gap: 12px;
  width: min(94%, 720px);
  max-width: 100%;
  margin: 0 auto;
  padding: 2px 4px 4px;
  box-sizing: border-box;
  pointer-events: auto;
}
.birles-uzam-scene--yy[data-yy-set="path"] .yy-picks {
  top: auto;
  left: auto;
  transform: none;
  width: min(94%, 720px);
  max-width: 100%;
  min-width: 0;
  gap: 12px;
}
.yy-picks .yy-pick,
.yy-picks .yy-dir,
.yy-picks .birles-uzam__choice {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: none;
  min-height: 2.7em;
  height: auto;
  margin: 0;
  padding: 0.58em 1.05em;
  border: 3px solid #0f766e;
  border-radius: 18px;
  background: linear-gradient(180deg, #fffef9 0%, #ffe58a 52%, #f4c14d 100%);
  color: #134e4a;
  font-family: "TemelYazi", "ComfortaaOkul", sans-serif;
  font-weight: 900;
  font-size: clamp(1.18rem, 2.55cqi, 1.52rem);
  letter-spacing: 0.02em;
  line-height: 1.1;
  text-align: center;
  white-space: normal;
  cursor: pointer;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.72),
    0 4px 0 #0f766e,
    0 12px 18px rgba(15, 23, 42, 0.2);
  pointer-events: auto;
}
.yy-picks .yy-pick .birles-uzam__choice-label,
.yy-picks .yy-dir .birles-uzam__choice-label {
  display: block;
  width: 100%;
  text-align: center;
}
.yy-picks .yy-pick:active,
.yy-picks .yy-dir:active,
.yy-picks .birles-uzam__choice:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #0f766e, 0 3px 8px rgba(15, 23, 42, 0.14);
}
.yy-picks .yy-pick.is-ok,
.yy-picks .yy-dir.is-ok,
.yy-picks .birles-uzam__choice.is-ok {
  background: linear-gradient(180deg, #dcfce7 0%, #4ade80 55%, #16a34a 100%);
  border-color: #15803d;
  color: #14532d;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.55),
    0 4px 0 #15803d,
    0 12px 18px rgba(21, 128, 61, 0.24);
}
.yy-picks .yy-pick.is-bad,
.yy-picks .yy-dir.is-bad,
.yy-picks .birles-uzam__choice.is-bad {
  background: linear-gradient(180deg, #fee2e2 0%, #fb7185 55%, #e11d48 100%);
  border-color: #be123c;
  color: #7f1d1d;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.45),
    0 4px 0 #be123c,
    0 10px 16px rgba(190, 18, 60, 0.22);
}
.yy-picks .yy-pick.is-dim,
.yy-picks .yy-dir.is-dim,
.yy-picks .birles-uzam__choice.is-dim {
  opacity: 0.55;
  filter: saturate(0.7);
}
.yy-dirs {
  display: none;
}

.birles-uzam-scene--yy.is-shake .yy-frame,
.birles-uzam-overlay.is-embed .birles-uzam-scene--yy.is-shake .yy-frame {
  animation: none;
}
@keyframes yy-shake {
  0%,
  100% {
    transform: translateX(-50%);
  }
  25% {
    transform: translateX(calc(-50% - 8px));
  }
  75% {
    transform: translateX(calc(-50% + 8px));
  }
}
@keyframes yy-shake-embed {
  0%,
  100% {
    transform: translate(-50%, -50%);
  }
  25% {
    transform: translate(calc(-50% - 8px), -50%);
  }
  75% {
    transform: translate(calc(-50% + 8px), -50%);
  }
}

.yy-okfx {
  position: absolute;
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  width: min(62%, 440px);
  height: min(72%, 440px);
  max-width: 68%;
  max-height: 78%;
  transform: translate(-50%, -50%);
  z-index: 80;
  pointer-events: none;
  overflow: hidden;
}
.yy-okfx__glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.35);
  background: radial-gradient(
    circle,
    rgba(254, 243, 199, 0.95) 0%,
    rgba(250, 204, 21, 0.55) 28%,
    rgba(74, 222, 128, 0.28) 52%,
    transparent 74%
  );
  filter: blur(1.5px);
  animation: yy-ok-glow 1.15s cubic-bezier(0.16, 0.84, 0.22, 1) forwards;
}
.yy-okfx.is-bad .yy-okfx__glow {
  background: radial-gradient(
    circle,
    rgba(255, 228, 230, 0.92) 0%,
    rgba(251, 113, 133, 0.5) 32%,
    rgba(244, 63, 94, 0.22) 54%,
    transparent 74%
  );
}
.yy-okfx__flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(253, 224, 71, 0.58) 0%,
    rgba(74, 222, 128, 0.22) 38%,
    transparent 70%
  );
  animation: yy-ok-flash 0.9s ease-out forwards;
}
.yy-okfx.is-bad .yy-okfx__flash {
  background: radial-gradient(
    circle at 50% 50%,
    rgba(251, 113, 133, 0.55) 0%,
    rgba(244, 63, 94, 0.22) 40%,
    transparent 70%
  );
}
.yy-okfx__ring,
.yy-okfx__ring--2,
.yy-okfx__ring--3 {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 38px;
  height: 38px;
  margin: 0;
  border: 6px solid #facc15;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.2);
  animation: yy-ok-ring 1.05s cubic-bezier(0.12, 0.72, 0.18, 1) forwards;
}
.yy-okfx__ring--2 {
  border-color: #4ade80;
  animation-delay: 0.1s;
}
.yy-okfx__ring--3 {
  width: 28px;
  height: 28px;
  border-width: 5px;
  border-color: #fffbeb;
  animation-delay: 0.18s;
  animation-duration: 0.95s;
}
.yy-okfx.is-bad .yy-okfx__ring {
  border-color: #fb7185;
}
.yy-okfx.is-bad .yy-okfx__ring--2 {
  border-color: #fda4af;
}
.yy-okfx.is-bad .yy-okfx__ring--3 {
  border-color: #fff1f2;
}
.yy-okfx__star {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 28px;
  background: #fffbeb;
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
  transform: translate(-50%, -50%) scale(0.2) rotate(0deg);
  filter: drop-shadow(0 0 14px #fde68a);
  animation: yy-ok-star 1.05s cubic-bezier(0.2, 1.35, 0.28, 1) forwards;
}
.yy-okfx__star--2 {
  width: 18px;
  height: 18px;
  animation-delay: 0.12s;
  filter: drop-shadow(0 0 10px #4ade80);
}
.yy-okfx.is-bad .yy-okfx__star {
  background: #ffe4e6;
  filter: drop-shadow(0 0 12px #fb7185);
}
.yy-okfx__stamp {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.35);
  font-family: "TemelYazi", sans-serif;
  font-weight: 900;
  font-size: clamp(1.7rem, 4.5cqi, 2.55rem);
  letter-spacing: 0.04em;
  color: #fffbeb;
  white-space: nowrap;
  text-shadow: 0 4px 0 #15803d, 0 14px 28px rgba(0, 0, 0, 0.42);
  animation: yy-ok-stamp 1.2s cubic-bezier(0.18, 1.4, 0.28, 1) forwards;
}
.yy-okfx.is-bad .yy-okfx__stamp {
  text-shadow: 0 4px 0 #9f1239, 0 14px 28px rgba(0, 0, 0, 0.42);
}
.yy-okfx__p {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 13px;
  margin: 0;
  border-radius: 4px;
  background: var(--c, #fde68a);
  box-shadow: 0 0 10px var(--c, #fde68a);
  transform: translate(-50%, -50%) rotate(var(--a, 0deg)) translateY(0) scale(1);
  animation: yy-ok-fly 1.05s ease-out forwards;
  animation-delay: var(--delay, 0ms);
}
.yy-okfx__p.is-dot {
  border-radius: 50%;
  width: 11px;
  height: 11px;
}
.yy-okfx__p.is-long {
  width: 22px;
  height: 8px;
  border-radius: 999px;
}
@keyframes yy-ok-glow {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.28);
  }
  28% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.15);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.7);
  }
}
@keyframes yy-ok-flash {
  0% {
    opacity: 0;
  }
  16% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes yy-ok-ring {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.12);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(8.2);
  }
}
@keyframes yy-ok-star {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.15) rotate(-20deg);
  }
  32% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(2.15) rotate(14deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.55) rotate(48deg);
  }
}
@keyframes yy-ok-stamp {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.22);
  }
  34% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.16);
  }
  70% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.94);
  }
}
@keyframes yy-ok-fly {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(var(--a, 0deg)) translateY(0) scale(1.15);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--a, 0deg)) translateY(calc(var(--d, 120px) * -1))
      scale(0.3);
  }
}

@media (max-width: 900px) {
  .yy-picks,
  .birles-uzam-scene--yy[data-yy-set="path"] .yy-picks {
    left: auto;
    top: auto;
    width: min(94%, 720px);
    max-width: 100%;
    min-width: 0;
    gap: 8px;
  }
  .yy-picks .yy-pick,
  .yy-picks .yy-dir,
  .yy-picks .birles-uzam__choice {
    min-height: 2.55em;
    padding: 0.42em 0.7em;
    font-size: clamp(0.98rem, 2.2cqi, 1.22rem);
  }
  .yy-word {
    font-size: clamp(0.95rem, 3.2cqi, 1.25rem);
    top: auto;
  }
  .yy-dock {
    left: auto;
    bottom: auto;
  }
  .yy-drag {
    width: 96px;
    height: 96px;
  }
  .yy-ball--drag {
    width: 92px;
    height: 92px;
  }
}
.birles-uzam--yeryon .birles-uzam__replay,
.birles-uzam--land .birles-uzam__replay {
  background: #fff8ee;
  color: #1a3d32;
  border: 2.5px solid #2f6f5e;
  box-shadow: 0 3px 0 #c4a574;
}

.yy-world .yy-items {
  position: absolute;
  left: 5%;
  top: 16%;
  width: 54%;
  height: 68%;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.yy-world .yy-items .birles-uzam__items {
  width: 100%;
  max-height: 100%;
}
.yy-world .birles-uzam__items.is-scatter,
.yy-world .birles-uzam__items.is-split {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
}
.yy-world .birles-uzam__items.is-scatter .birles-uzam__item,
.yy-world .birles-uzam__items.is-split .birles-uzam__item {
  position: absolute;
  width: clamp(58px, 12cqi, 108px);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.yy-world .birles-uzam__items.is-scatter .birles-uzam__item:nth-child(1) { left: 6%; top: 8%; }
.yy-world .birles-uzam__items.is-scatter .birles-uzam__item:nth-child(2) { left: 42%; top: 4%; }
.yy-world .birles-uzam__items.is-scatter .birles-uzam__item:nth-child(3) { left: 18%; top: 36%; }
.yy-world .birles-uzam__items.is-scatter .birles-uzam__item:nth-child(4) { left: 52%; top: 40%; }
.yy-world .birles-uzam__items.is-scatter .birles-uzam__item:nth-child(5) { left: 8%; top: 64%; }
.yy-world .birles-uzam__items.is-scatter .birles-uzam__item:nth-child(6) { left: 40%; top: 66%; }
.yy-world .birles-uzam__items.is-split .birles-uzam__item:nth-child(1) { left: 2%; top: 22%; }
.yy-world .birles-uzam__items.is-split .birles-uzam__item:nth-child(2) { left: 22%; top: 14%; }
.yy-world .birles-uzam__items.is-split .birles-uzam__item:nth-child(3) { left: 10%; top: 52%; }
.yy-world .birles-uzam__items.is-split .birles-uzam__item:nth-child(4) { left: 48%; top: 22%; }
.yy-world .birles-uzam__items.is-split .birles-uzam__item:nth-child(5) { left: 58%; top: 52%; }
.yy-world .birles-uzam__items {
  position: relative;
}
.yy-world .birles-uzam__items.is-tables {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
}
.yy-desks {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 6%;
  width: 100%;
  height: 100%;
  position: relative;
}
.yy-desk {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
}
.yy-desk-name {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-family: "TemelYazi", sans-serif;
  font-size: clamp(0.95rem, 2.6cqi, 1.25rem);
  color: #6b3f1f;
  line-height: 1.2;
}
.yy-desk-top {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 16%;
  height: 12%;
  background: linear-gradient(#f3d7ad, #d7a56b);
  border-radius: 12px 12px 6px 6px;
  box-shadow: 0 9px 0 #b8884e;
}
.yy-desk-leg {
  position: absolute;
  left: 16%;
  right: 16%;
  bottom: 2%;
  height: 16%;
  background: linear-gradient(#c99562, #a8743e);
  border-radius: 0 0 8px 8px;
}
.yy-desk-items {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 28%;
  bottom: 30%;
}
.yy-desk-items .birles-uzam__item {
  position: absolute;
  width: 42%;
  top: auto;
  bottom: 0;
}
.yy-desk-items .birles-uzam__item-img {
  max-height: min(15vh, 88px);
}
.yy-desk[data-yy-desk="1"] .birles-uzam__item:nth-child(1) { left: 0; bottom: 0; }
.yy-desk[data-yy-desk="1"] .birles-uzam__item:nth-child(2) { left: 29%; bottom: 8%; }
.yy-desk[data-yy-desk="1"] .birles-uzam__item:nth-child(3) { left: 56%; bottom: 0; }
.yy-desk[data-yy-desk="2"] .birles-uzam__item:nth-child(1) { left: 6%; bottom: 0; }
.yy-desk[data-yy-desk="2"] .birles-uzam__item:nth-child(2) { left: 48%; bottom: 0; }
.yy-ring {
  display: none !important;
}
.yy-ring.is-on { opacity: 1; }
.yy-ring [data-yy-ring-n] {
  position: absolute;
  left: 50%;
  bottom: -0.15em;
  transform: translateX(-50%);
  font-family: "TemelYazi", sans-serif;
  font-weight: 800;
  font-size: clamp(1.35rem, 4.2cqi, 2.15rem);
  line-height: 1;
  color: #0f766e;
}
.yy-ring--all {
  inset: 6% 1% 0 1%;
  z-index: 6;
}
.yy-world .yy-items.is-tap .birles-uzam__item {
  pointer-events: auto;
  cursor: pointer;
}
.yy-world .birles-uzam__item {
  width: clamp(72px, 11cqi, 128px);
}
.yy-world .birles-uzam__item.is-shown {
  opacity: 1;
  filter: none;
  transform: scale(1);
}
.yy-world .birles-uzam__item.is-kept {
  opacity: 1;
  filter: drop-shadow(0 8px 12px rgba(80, 40, 10, 0.28));
}
.yy-world .birles-uzam__item.is-lit {
  filter: drop-shadow(0 0 12px #fde68a) drop-shadow(0 8px 14px rgba(80, 40, 10, 0.3));
  transform: scale(1.08);
}
.yy-world .birles-uzam__item-img {
  max-height: min(24vh, 140px);
  background: transparent;
}
.yy-world .birles-uzam__item-badge {
  display: block;
  margin-top: 1px;
  min-width: 1.1em;
  text-align: center;
  font-family: "TemelYazi", sans-serif;
  font-weight: 800;
  font-size: clamp(1rem, 3.1cqi, 1.55rem);
  line-height: 1;
  color: #0f766e;
}
.yy-world .birles-uzam__item-badge[hidden] {
  display: none !important;
}
.yy-world .birles-uzam__items.is-many .birles-uzam__item-badge {
  font-size: clamp(0.72rem, 2cqi, 1rem);
}
.yy-world .birles-uzam__items.is-tiny .birles-uzam__item {
  width: clamp(36px, 6cqi, 62px);
}
.yy-world .birles-uzam__items.is-tiny .birles-uzam__item-img {
  max-height: min(11vh, 58px);
}
.yy-world .yy-chips {
  display: none !important;
}
.yy-world .yy-num {
  position: absolute;
  left: 31%;
  width: auto;
  top: 58%;
  bottom: auto;
  z-index: 8;
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 1.35em;
  padding: 0.12em 0.46em;
  border-radius: 18px;
  background: #fff8ee;
  border: 3.5px solid #0f766e;
  box-shadow: 0 4px 0 #c4a574;
  color: #0f766e;
  font-family: "TemelYazi", sans-serif;
  font-weight: 900;
  font-size: clamp(2.4rem, 7.2cqi, 3.8rem);
  line-height: 1;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%) scale(0.86);
  transition: opacity 0.32s ease, transform 0.32s ease;
}
.yy-world .yy-num.is-on {
  display: flex;
  opacity: 1;
  transform: translateX(-50%) scale(1);
}
.yy-world .yy-tile {
  position: absolute;
  left: 22%;
  top: 34%;
  width: 18%;
  z-index: 6;
  opacity: 0;
  transform: scale(0.72);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.yy-world .yy-tile.is-on {
  opacity: 1;
  transform: scale(1);
}
.yy-frame[data-yy-set="sepet"] .yy-tile {
  left: 6%;
  top: 7%;
  width: 12%;
}
.yy-tile-img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 14px rgba(80, 40, 10, 0.28));
}
.yy-world .yy-tally {
  position: absolute;
  left: 10%;
  bottom: 14%;
  width: 42%;
  z-index: 6;
  display: flex;
  gap: 8px;
  justify-content: center;
  pointer-events: none;
}
.yy-tally-mark {
  width: 11px;
  height: 54px;
  border-radius: 4px;
  background: #c4a574;
  opacity: 0.22;
  transform: scaleY(0.35);
  transform-origin: bottom center;
  transition: transform 0.28s ease, opacity 0.28s ease, background 0.28s ease;
}
.yy-tally-mark.is-on {
  opacity: 1;
  background: #7c2d12;
  transform: scaleY(1);
}
.yy-world .yy-chips {
  display: none !important;
}
.yy-world .yy-chips .birles-uzam__beat {
  min-width: 1.55em;
  padding: 0.12em 0.35em;
  border-radius: 999px;
  background: rgba(255, 247, 232, 0.72);
  color: #3f2a14;
  font-family: "TemelYazi", sans-serif;
  font-weight: 800;
  font-size: clamp(0.82rem, 2.1cqi, 1.05rem);
  text-align: center;
  opacity: 0.45;
}
.yy-world .yy-chips .birles-uzam__beat.is-on,
.yy-world .yy-chips .birles-uzam__beat.is-done {
  opacity: 1;
  background: #0f766e;
  color: #fffbeb;
}
.yy-fill {
  grid-row: 2;
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  z-index: 6;
  width: min(94%, 640px);
}
.yy-fill span {
  min-width: 1.7em;
  padding: 0.18em 0.42em;
  border-radius: 12px;
  background: #fff7e8;
  border: 2.5px solid #2f6f5e;
  color: #12352d;
  font-family: "TemelYazi", sans-serif;
  font-weight: 900;
  font-size: clamp(1.15rem, 3.2cqi, 1.7rem);
  text-align: center;
  box-shadow: 0 3px 0 #c4a574;
}
.yy-fill span.is-blank {
  background: #fff;
  border-style: dashed;
  color: #0f766e;
}
.yy-match {
  display: grid !important;
  grid-template-columns: 1.4fr 0.9fr;
  grid-auto-flow: row;
  gap: 10px 14px;
  width: min(96%, 760px);
}
.yy-match-col {
  display: grid;
  gap: 8px;
}
.yy-match-card,
.yy-match-num {
  min-height: 52px;
}
.yy-match-minis {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  justify-content: center;
  align-items: center;
}
.yy-match-mini {
  width: 28px;
  height: 28px;
  object-fit: contain;
  pointer-events: none;
}
.yy-match-card.is-sel,
.yy-match-num.is-sel {
  outline: 4px solid #f59e0b;
  box-shadow: 0 0 0 4px #fff8ee, 0 0 0 8px #f59e0b, 0 10px 22px rgba(245, 158, 11, 0.45);
  background: #fff3c4 !important;
  transform: translateY(-4px) scale(1.05);
  z-index: 2;
}
.yy-match-card.is-ok,
.yy-match-num.is-ok {
  outline: 4px solid #0f766e;
  box-shadow: 0 0 0 4px #ecfdf5;
}
.yy-tapn {
  width: min(70%, 420px);
}
.yy-tapn-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 64px;
}
.yy-tapn-label {
  font-weight: 900;
}
.yy-tapn-n {
  font-family: "TemelYazi", sans-serif;
  font-size: 1.45rem;
  font-weight: 900;
  color: #0f766e;
}

@media (orientation: portrait) {
  .yy-caption {
    max-width: 88%;
    font-size: 0.82rem;
  }
}