/* EduFabTech — game-word.css (Word builder). Önek gm-word-. Vurgu renkleri: cyan #19e3ff (yazılan / ipucu), gold #ffd24a (bonus). */
.gm-word-box {
  --gm-word-tile: clamp(48px, 13vw, 66px);
  --gm-word-cell: clamp(24px, 7vw, 32px);
  --gm-word-cyan: #19e3ff;
  --gm-word-gold: #ffd24a;
  width: min(560px, 100%);
  margin: 0 auto;
  padding: 12px 12px 14px;
  box-sizing: border-box;
  background: linear-gradient(180deg, #151b26 0%, #10141c 60%, #0d1118 100%);
  border: 1px solid var(--border, #1f2733);
  border-radius: var(--radius, 14px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .05);
  font-family: var(--sans);
  color: var(--text, #edf0f5);
  user-select: none;
  -webkit-user-select: none;
  transition: box-shadow .25s ease;
}
.gm-word-box.gm-word-won { box-shadow: 0 0 0 1px rgba(67, 212, 155, .5), 0 0 34px rgba(67, 212, 155, .35), 0 18px 40px rgba(0, 0, 0, .45); }

/* HUD */
.gm-word-hud {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: linear-gradient(180deg, #0c0f15, #10141c);
  border: 1px solid var(--border, #1f2733);
  border-radius: 999px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .55);
  font-size: .9rem;
}
.gm-word-hud-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gm-word-status { font-weight: 700; color: var(--text, #edf0f5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-word-bar { display: block; height: 5px; border-radius: 3px; background: #0a0c11; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .7); overflow: hidden; }
.gm-word-bar-fill {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #2fb983, var(--brand, #43d49b));
  box-shadow: 0 0 8px rgba(67, 212, 155, .7);
  transition: width .25s ease;
}
.gm-word-clock { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--muted, #6f7c8d); }
.gm-word-hints { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--warn, #e8b25c); font-weight: 700; }
.gm-word-hints-bump { animation: gm-word-bump .26s ease; }

/* Hedef kutuları */
.gm-word-targets {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0 0;
  padding: 12px 10px;
  background: radial-gradient(120% 90% at 50% 0%, #141a25, #0d1118 70%);
  border: 1px solid var(--border, #1f2733);
  border-radius: var(--radius-sm, 10px);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, .5);
}
.gm-word-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.gm-word-row-len {
  flex: 0 0 auto;
  width: 18px;
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--muted, #6f7c8d);
  text-align: right;
}
.gm-word-target { display: inline-flex; gap: 3px; }
.gm-word-cell {
  display: grid;
  place-items: center;
  width: var(--gm-word-cell);
  height: var(--gm-word-cell);
  border-radius: 6px;
  background: linear-gradient(180deg, #0c0f15, #121822);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .65), 0 0 0 1px #222c3a;
  font-family: var(--mono);
  font-weight: 800;
  font-size: calc(var(--gm-word-cell) * .55);
  line-height: 1;
  color: transparent;
  transition: background .2s ease, box-shadow .2s ease, color .2s ease;
}
.gm-word-cell-rev {
  color: var(--gm-word-cyan);
  background: linear-gradient(180deg, #0e2430, #0c1a26);
  box-shadow: inset 0 0 0 1px rgba(25, 227, 255, .55), 0 0 10px rgba(25, 227, 255, .3);
}
.gm-word-cell-hit {
  color: #06130d;
  background: linear-gradient(180deg, #5cf0b7, #2fb983);
  box-shadow: 0 0 0 1px rgba(67, 212, 155, .6), 0 0 12px rgba(67, 212, 155, .55), inset 0 1px 0 rgba(255, 255, 255, .4);
}
.gm-word-cell-pop { animation: gm-word-pop .26s cubic-bezier(.2, 1.4, .4, 1) both; }
.gm-word-won .gm-word-cell-hit { box-shadow: 0 0 0 1px rgba(67, 212, 155, .8), 0 0 18px rgba(67, 212, 155, .8); }

/* Bonus */
.gm-word-bonus { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 2px 0; font-size: .82rem; }
.gm-word-bonus[hidden] { display: none; }
.gm-word-bonus-label { color: var(--gm-word-gold); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: .72rem; }
.gm-word-bonus-list { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.gm-word-chip {
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--mono);
  font-weight: 700;
  color: #2a1e00;
  background: linear-gradient(180deg, #ffe38a, #f0b92f);
  box-shadow: 0 2px 0 #7a5a00, 0 0 10px rgba(255, 210, 74, .35);
}
.gm-word-chip-pop { animation: gm-word-pop .28s cubic-bezier(.2, 1.4, .4, 1) both; }

/* Yazılan kelime */
.gm-word-entry { margin: 12px 0 4px; text-align: center; }
.gm-word-word {
  display: inline-block;
  min-width: 56%;
  min-height: 52px;
  padding: 8px 18px;
  box-sizing: border-box;
  border-radius: 999px;
  background: linear-gradient(180deg, #0c0f15, #121822);
  border: 1px solid var(--border, #1f2733);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .6);
  font-family: var(--mono);
  font-weight: 800;
  font-size: 1.7rem;
  letter-spacing: .18em;
  line-height: 36px;
  color: var(--gm-word-cyan);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.gm-word-word:empty::before { content: attr(data-empty); font: 500 .9rem var(--sans); letter-spacing: 0; color: var(--muted, #6f7c8d); }
.gm-word-word-on { border-color: rgba(25, 227, 255, .55); box-shadow: inset 0 2px 8px rgba(0, 0, 0, .6), 0 0 16px rgba(25, 227, 255, .25); }
.gm-word-entry-good .gm-word-word { border-color: var(--brand, #43d49b); box-shadow: 0 0 18px rgba(67, 212, 155, .5); }
.gm-word-entry-bonus .gm-word-word { border-color: var(--gm-word-gold); box-shadow: 0 0 18px rgba(255, 210, 74, .5); }
.gm-word-msg { min-height: 1.5em; margin-top: 6px; font-size: .85rem; line-height: 1.5; color: var(--muted, #6f7c8d); }
.gm-word-msg-good { color: var(--brand, #43d49b); font-weight: 700; }
.gm-word-msg-bonus { color: var(--gm-word-gold); font-weight: 700; }
.gm-word-msg-bad { color: var(--err, #ef6a62); }
.gm-word-msg-win { color: var(--brand, #43d49b); font-weight: 800; font-size: 1rem; }
.gm-word-msg-in { animation: gm-word-rise .26s ease-out; }

/* Harf taşları — yelpaze */
.gm-word-rack {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 6px;
  padding: 12px 4px 30px;
  touch-action: manipulation;
}
.gm-word-slot { display: block; flex: 0 0 auto; }
.gm-word-tile {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  border-radius: 14px;
}
.gm-word-tile:focus-visible { outline: 2px solid var(--brand, #43d49b); outline-offset: 3px; }
.gm-word-tile.gm-word-flip { transition: transform .24s cubic-bezier(.2, .9, .3, 1.1); }
.gm-word-face {
  display: grid;
  place-items: center;
  width: var(--gm-word-tile);
  height: var(--gm-word-tile);
  border-radius: 14px;
  background: linear-gradient(180deg, #313d4f 0%, #222b39 55%, #1a2130 100%);
  box-shadow: 0 6px 0 #0a0d13, 0 10px 16px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -2px 0 rgba(0, 0, 0, .25);
  font-weight: 800;
  font-size: calc(var(--gm-word-tile) * .48);
  line-height: 1;
  color: var(--text, #edf0f5);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.gm-word-tile:hover .gm-word-face { background: linear-gradient(180deg, #3a475b 0%, #27313f 55%, #1d2534 100%); }
.gm-word-tile:active .gm-word-face {
  transform: translateY(5px);
  box-shadow: 0 1px 0 #0a0d13, 0 3px 6px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .1);
}
.gm-word-tile-on .gm-word-face,
.gm-word-tile-on:hover .gm-word-face {
  transform: translateY(-9px) scale(1.04);
  color: #06130d;
  background: linear-gradient(180deg, #6df5c0 0%, #43d49b 55%, #2aa877 100%);
  box-shadow: 0 7px 0 #146b4c, 0 12px 18px rgba(0, 0, 0, .5), 0 0 20px rgba(67, 212, 155, .55), inset 0 1px 0 rgba(255, 255, 255, .45);
  text-shadow: none;
}
.gm-word-tile-on:active .gm-word-face { transform: translateY(-4px) scale(1.02); box-shadow: 0 3px 0 #146b4c, 0 0 20px rgba(67, 212, 155, .55); }
.gm-word-nudge { animation: gm-word-nudge .16s ease; }

/* Düğmeler */
.gm-word-ctl { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; margin-top: 2px; }
.gm-word-ctl-2 { grid-template-columns: 1fr 1fr 1fr; margin-top: 10px; }
.gm-word-btn {
  min-height: 50px;
  padding: 8px 12px;
  border: 1px solid var(--border, #1f2733);
  border-radius: 12px;
  background: linear-gradient(180deg, #1c2331, #131822);
  box-shadow: 0 4px 0 #080a0e, 0 6px 12px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .08);
  color: var(--text, #edf0f5);
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, box-shadow .12s ease, opacity .15s ease;
}
.gm-word-btn:hover { border-color: var(--muted, #6f7c8d); }
.gm-word-btn:active { transform: translateY(4px); box-shadow: 0 0 0 #080a0e, 0 2px 4px rgba(0, 0, 0, .4); }
.gm-word-btn:focus-visible { outline: 2px solid var(--brand, #43d49b); outline-offset: 2px; }
.gm-word-btn:disabled { opacity: .45; cursor: default; transform: none; }
.gm-word-del { font-size: 1.3rem; }
.gm-word-ok {
  color: #06130d;
  border-color: #2fb983;
  background: linear-gradient(180deg, #6df5c0, #35c48d 60%, #2aa877);
  box-shadow: 0 4px 0 #146b4c, 0 8px 16px rgba(67, 212, 155, .3), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.gm-word-ok:not(:disabled):hover { box-shadow: 0 4px 0 #146b4c, 0 0 20px rgba(67, 212, 155, .55), inset 0 1px 0 rgba(255, 255, 255, .45); }
.gm-word-ok:active { box-shadow: 0 0 0 #146b4c, 0 2px 4px rgba(0, 0, 0, .4); }
.gm-word-hint { color: var(--warn, #e8b25c); }
.gm-word-give { color: var(--muted, #6f7c8d); font-weight: 600; }
.gm-word-give.gm-word-confirm { color: #fff; border-color: var(--err, #ef6a62); background: linear-gradient(180deg, #b2443e, #8c2f2a); box-shadow: 0 4px 0 #4a1513, 0 0 14px rgba(239, 106, 98, .4); }
.gm-word-help { margin: 12px 0 0; font-size: .8rem; line-height: 1.4; color: var(--muted, #6f7c8d); text-align: center; }

/* Hareket */
.gm-word-shake { animation: gm-word-shake .28s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes gm-word-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}
@keyframes gm-word-pop {
  0% { transform: scale(.6); filter: brightness(1.6); }
  60% { transform: scale(1.18); }
  100% { transform: scale(1); filter: brightness(1); }
}
@keyframes gm-word-bump { 0% { transform: scale(1); } 50% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes gm-word-rise { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes gm-word-nudge { 0% { transform: translateX(0); } 50% { transform: translateX(3px); } 100% { transform: translateX(0); } }

.gm-word-reduced,
.gm-word-reduced * { animation: none !important; transition: none !important; }
.gm-word-reduced .gm-word-tile:active .gm-word-face,
.gm-word-reduced .gm-word-btn:active { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .gm-word-box, .gm-word-box * { animation: none !important; transition: none !important; }
}

@media (max-width: 400px) {
  .gm-word-box { padding: 10px 8px 12px; }
  .gm-word-hud { gap: 8px; padding: 7px 10px; font-size: .82rem; }
  .gm-word-targets { padding: 10px 6px; }
  .gm-word-row { gap: 6px 8px; }
  .gm-word-row-len { width: 14px; }
  .gm-word-word { font-size: 1.45rem; letter-spacing: .14em; }
  .gm-word-rack { gap: 5px; padding-bottom: 26px; }
  .gm-word-btn { font-size: .92rem; padding: 8px 6px; }
  .gm-word-help { display: none; }
}