/* WORDSHOP playing card — mirrors the printed card. Set --frame and --accent on .ws-card. */
.ws-card { position: relative; width: 100%; max-width: 340px; margin: 0 auto; aspect-ratio: 63 / 88; border-radius: 16px; overflow: hidden; background: #FBF7EE;
  box-shadow: 0 18px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04); container-type: inline-size; color: #fff; user-select: none; -webkit-user-select: none; }
.ws-card .head { position: absolute; inset: 0 0 auto 0; height: 46%; }
.ws-card .head::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.6%; background: var(--frame); }
.ws-card .facets { position: absolute; inset: 0; opacity: .09; background-image: repeating-linear-gradient(62deg, #fff 0 1px, transparent 1px 11%), repeating-linear-gradient(-58deg, #fff 0 1px, transparent 1px 14%); }
.ws-card .frame { position: absolute; inset: 3.2%; border-radius: 11px; border: 1.6px solid transparent; pointer-events: none;
  background: var(--frame) border-box; -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.ws-card .meta { position: absolute; top: 7.5%; left: 9%; right: 8.5%; display: flex; justify-content: space-between; align-items: center; font-size: 3.4cqw; font-weight: 800; letter-spacing: .1em; white-space: nowrap; }
.ws-card .meta small { font-weight: 500; letter-spacing: .02em; opacity: .85; font-size: 3.4cqw; }
.ws-card .lv { display: flex; gap: 1.4cqw; }
.ws-card .lv span { width: 2.6cqw; height: 2.6cqw; transform: rotate(45deg); border: 1px solid var(--accent); }
.ws-card .lv span.on { background: var(--frame); }
.ws-card .term { position: absolute; top: 15%; left: 8%; right: 8%; height: 18%; display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: 'Archivo Black', 'Arial Black', Impact, sans-serif; line-height: 1; text-shadow: 0 2px 0 rgba(0,0,0,.25); text-wrap: balance; overflow-wrap: anywhere; }
.ws-card .tr { position: absolute; top: 35.5%; left: 6%; right: 6%; text-align: center; font-size: 4.4cqw; font-weight: 500; }
.ws-card .tr b { font-size: 2.9cqw; letter-spacing: .12em; color: var(--accent); filter: brightness(1.25); margin-right: 1.4cqw; font-weight: 800; }
.ws-card .stone { position: absolute; top: 46%; left: 50%; width: 11%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.ws-card .dont { position: absolute; top: 55.5%; left: 0; right: 0; text-align: center; color: #B8322F; font-size: 3.3cqw; font-weight: 800; letter-spacing: .18em; }
.ws-card ul { position: absolute; top: 60%; left: 15%; right: 15%; margin: 0; padding: 0; list-style: none; color: #23222A; }
.ws-card li { text-align: center; font-weight: 600; font-size: 6.4cqw; height: 6.6cqw; line-height: 6.6cqw; box-sizing: content-box; padding-block: .55cqw; border-bottom: 1px solid #E7DCC2; white-space: nowrap; }
.ws-card li:last-child { border-bottom: 0; }
.ws-card .foot { position: absolute; bottom: 6.3%; left: 9.5%; right: 9.5%; display: flex; justify-content: space-between; font-size: 2.9cqw; font-weight: 600; color: #9A8A62; letter-spacing: .06em; }
.ws-card .foot b { color: #8A6A1F; letter-spacing: .14em; }
.ws-card.flip { animation: ws-deal .38s cubic-bezier(.2,.8,.2,1); }
@keyframes ws-deal { from { transform: translateY(14px) rotate(-2deg); opacity: .2; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ws-card.flip { animation: none; } }
/* example sentence under a card (web + mobile) */
.ws-ex { display: flex; gap: 10px; align-items: flex-start; margin: 12px auto 0; max-width: 420px; padding: 12px 14px; border-radius: 14px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); font-size: 15px; line-height: 1.45; color: #E8E6DF; text-align: left; }
.ws-ex b { color: var(--acc, #E2BC5C); font-weight: 800; }
.ws-ex .speak { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; padding: 0; font-size: 15px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: inherit; cursor: pointer; }
/* study mode / card list: tap a taboo word to hear it; its Turkish meaning on this card in grey */
.ws-card ul.learn li { cursor: pointer; overflow: hidden; text-overflow: ellipsis; }
.ws-card ul.learn li:hover { color: #000; }
/* 12.10.2026 (kullanici): basili kartla ayni - ortada dikey cizgi, Ingilizce sol yarida, Turkce sag yarida, ikisi de ortali */
.ws-card ul.has-tr { left: 9%; right: 9%; }
.ws-card ul.has-tr::before { content: ""; position: absolute; left: 50%; top: 1cqw; bottom: 1cqw; border-left: 1px solid #E7DCC2; }
.ws-card ul.has-tr li { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.4cqw; align-items: baseline; font-size: 5.6cqw; text-overflow: clip; }
.ws-card ul.has-tr li span { overflow: hidden; min-width: 0; font-size: 5.6cqw; }
.ws-card ul.has-tr li i { overflow: hidden; min-width: 0; font-style: normal; font-weight: 500; font-size: 3.9cqw; color: #6F6A5E; text-align: center; }
.ws-ex .extr { display: block; margin-top: 6px; color: #AEB6BF; font-size: .92em; }

/* hata bildir */
.rep { display: block; margin: 8px auto 0; background: none; border: 0; color: #9AA3B5; font: 600 12px inherit; cursor: pointer; text-decoration: underline dotted; }
.rep:hover { color: #FFC61A; }
.repbox { position: fixed; inset: 0; background: rgba(5,10,20,.6); display: grid; place-items: center; z-index: 100; padding: 16px; }
.reppanel { background: #16213A; color: #EDEFF3; border: 1px solid #2B3B60; border-radius: 16px; padding: 18px; width: min(420px, 100%); display: flex; flex-direction: column; gap: 8px; font: 500 14px system-ui, sans-serif; }
.reppanel h3 { margin: 0 0 4px; font-size: 16px; }
.reppanel label { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.reppanel textarea { font: inherit; color: inherit; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); border-radius: 10px; padding: 8px 10px; resize: vertical; }
.repmsg { margin: 0; min-height: 1em; color: #FFC61A; font-size: 13px; }
.repbtns { display: flex; gap: 8px; justify-content: flex-end; }
.repbtns button { border: 0; border-radius: 999px; padding: 8px 16px; font: 700 13px system-ui, sans-serif; cursor: pointer; }
.repno { background: rgba(255,255,255,.1); color: inherit; }
.repyes { background: #FFC61A; color: #14233F; }