/* ================= GGGL Reversi (përdor edhe stilet e hollit dhe të shiritave nga chess.css) ================= */
.howto { margin-top: 32px; }
.howto h2 { font: 700 20px/1.2 var(--display); margin: 0 0 12px; }
.howto-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.howto-grid div { padding: 14px 16px; border-radius: var(--r-sm); background: var(--deck); border: 1px solid var(--rail); }
.howto-grid p { margin: 6px 0 0; color: var(--haze); font-size: 14px; line-height: 1.5; }
.quick-art { display: grid; grid-template-columns: repeat(2, 42px); gap: 6px; justify-content: center; padding: 10px; margin: 4px auto; border-radius: 14px; background: linear-gradient(160deg, #1E805F, #145A43); box-shadow: inset 0 0 0 3px #0E1433; }
.qd { width: 42px; height: 42px; border-radius: 50%; box-shadow: 0 6px 10px -4px rgba(0,0,0,.7); }
.qd.b { background: radial-gradient(circle at 35% 30%, #4A5078, #151827 55%, #07080F); }
.qd.w { background: radial-gradient(circle at 35% 30%, #fff, #E9EDFB 50%, #B8C1E4); }
.reversi-page #quick { margin-top: auto; }

/* ---------- Tabela 2D ---------- */
.rwrap { border-radius: 16px; background: #0E1433; }
#board { width: 100%; height: 100%; }
.rboard {
  --pad: 26px;
  position: relative; width: 100%; height: 100%; padding: var(--pad);
  display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); gap: 3px;
  border-radius: 16px; user-select: none; -webkit-user-select: none;
  background:
    radial-gradient(120% 90% at 30% 10%, rgba(255,255,255,.08), transparent 55%),
    linear-gradient(160deg, #1D2658, #0E1433 70%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 -8px 20px rgba(0,0,0,.5);
}
.rboard::before {
  content: ''; position: absolute; inset: calc(var(--pad) - 4px); border-radius: 8px; pointer-events: none;
  box-shadow: 0 0 0 2px #C9A24A, 0 0 22px rgba(0,0,0,.6);
}
.rcell {
  position: relative; border: 0; padding: 0; border-radius: 5px; cursor: default; perspective: 500px;
  background: radial-gradient(130% 130% at 30% 20%, #25966F, #1B7A5A 55%, #145C44);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -2px 4px rgba(0,0,0,.35);
}
.rcell:nth-child(2n + 1) { background: radial-gradient(130% 130% at 30% 20%, #239069, #197455 55%, #135640); }
.rcoord { position: absolute; font: 800 11px/1 var(--body); color: #E3C07A; opacity: .9; pointer-events: none; }
.rcoord.f { bottom: 6px; left: calc(var(--pad) + (100% - 2 * var(--pad)) * (var(--k) + .5) / 8); transform: translateX(-50%); }
.rcoord.r { left: 9px; top: calc(var(--pad) + (100% - 2 * var(--pad)) * (var(--k) + .5) / 8); transform: translateY(-50%); }

/* gurët: dy faqe, kthehen në 3D */
.rdisc { position: absolute; inset: 9%; transform-style: preserve-3d; transition: transform .45s cubic-bezier(.3, .7, .3, 1.15); z-index: 1; }
.rdisc[data-c="2"] { transform: rotateY(180deg); }
.rf { position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.rf.b { background: radial-gradient(circle at 34% 28%, #5A6190 0%, #1B1F36 45%, #07080F 100%); box-shadow: inset 0 -3px 6px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.08); }
.rf.w { transform: rotateY(180deg); background: radial-gradient(circle at 34% 28%, #FFFFFF 0%, #EEF1FC 40%, #B7C0E3 100%); box-shadow: inset 0 -3px 6px rgba(0,0,0,.2), inset 0 0 0 1px rgba(11,16,38,.12); }
.rf::after { content: ''; position: absolute; left: 22%; top: 12%; width: 34%; height: 20%; border-radius: 50%; background: linear-gradient(180deg, rgba(255,255,255,.55), transparent); transform: rotate(-20deg); }
.rcell:has(.rdisc)::before { content: ''; position: absolute; inset: 14% 10% 4% 12%; border-radius: 50%; background: rgba(0,0,0,.45); filter: blur(4px); }
.rdisc.pop { animation: rpop .38s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes rpop { from { scale: 1.45; translate: 0 -14px; opacity: .6; } }
.rcell.last::after { content: ''; position: absolute; left: 50%; top: 50%; width: 16%; height: 16%; margin: -8% 0 0 -8%; border-radius: 50%; background: #FFC24B; box-shadow: 0 0 10px #FFC24B; z-index: 3; }
.rcell.legal { cursor: pointer; }
.rcell.legal::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 30%; height: 30%; margin: -15% 0 0 -15%; border-radius: 50%;
  border: 3px solid rgba(160,180,255,.75); animation: hint 1.2s ease-in-out infinite;
}
.rboard.nohints .rcell.legal::after { display: none; }
@keyframes hint { 50% { transform: scale(1.18); border-color: rgba(160,180,255,.35); } }
.rcell.legal:hover::after { width: 76%; height: 76%; margin: -38% 0 0 -38%; border: 0; animation: none; opacity: .45; background: var(--ghost); }
.rboard[data-me="1"] { --ghost: radial-gradient(circle at 34% 28%, #5A6190, #07080F); }
.rboard[data-me="2"] { --ghost: radial-gradient(circle at 34% 28%, #fff, #B7C0E3); }

/* shiritat e lojtarëve: numri i gurëve */
.dcount { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--ink); font: 800 20px/1 var(--display); min-width: 64px; }
.dcount i { width: 24px; height: 24px; border-radius: 50%; flex: none; }
.dcount i.b { background: radial-gradient(circle at 34% 28%, #5A6190, #151827 55%, #07080F); box-shadow: 0 0 0 1px rgba(255,255,255,.2); }
.dcount i.w { background: radial-gradient(circle at 34% 28%, #fff, #E9EDFB 50%, #B8C1E4); }
.pbar .tleft { font: 700 13px var(--display); color: var(--haze); min-width: 34px; text-align: right; }
.pbar.turn .tleft { color: var(--gold); }

/* ---------- Tabela 3D ---------- */
.rwrap.b3d { background: radial-gradient(120% 90% at 50% 30%, #26306A 0%, #141A3E 55%, #0B1026 100%); }
.board3d { width: 100%; height: 100%; }
.board3d canvas { display: block; width: 100% !important; height: 100% !important; }

@media (max-width: 1000px) { .howto-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) {
  .howto-grid { grid-template-columns: 1fr; }
  .rboard { --pad: 18px; gap: 2px; border-radius: 12px; }
  .rcoord { font-size: 9px; }
  .rcoord.f { bottom: 3px; } .rcoord.r { left: 5px; }
}