:root {
    --bg: #10131a;
    --panel: #181d27;
    --panel2: #202636;
    --text: #f3f4f6;
    --muted: #a8b0c2;
    --accent: #d9ad5b;
    --danger: #b94a48;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, sans-serif; background: var(--bg); color: var(--text); }
a { color: var(--accent); text-decoration: none; }
.site-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; background: #0b0e13; border-bottom: 1px solid #2b3242; gap: 1rem; }
.brand { font-weight: 800; font-size: 1.4rem; color: var(--text); }
nav { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem; }
.container { max-width: 1180px; margin: 0 auto; padding: 1.5rem; }
.site-footer { padding: 1rem 1.5rem; color: var(--muted); border-top: 1px solid #2b3242; }
.hero, .grid.two { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 1.2rem; align-items: stretch; }
.hero { padding: 2rem; background: linear-gradient(135deg, #181d27, #111827); border: 1px solid #2b3242; border-radius: 18px; margin-bottom: 1.2rem; }
.hero h1 { font-size: clamp(2rem, 4vw, 4rem); margin: 0 0 .5rem; }
.card, .ad-slot { background: var(--panel); border: 1px solid #2b3242; border-radius: 18px; padding: 1.2rem; margin-bottom: 1.2rem; }
.ad-slot { display: flex; align-items: center; justify-content: center; color: var(--muted); min-height: 150px; background: repeating-linear-gradient(135deg, #181d27, #181d27 10px, #202636 10px, #202636 20px); }
.actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1rem; }
.button, button { background: var(--accent); border: 0; color: #141414; padding: .7rem 1rem; border-radius: 10px; font-weight: 700; cursor: pointer; display: inline-block; }
.button.secondary, button.secondary { background: var(--panel2); color: var(--text); border: 1px solid #3a4356; }
button.danger { background: var(--danger); color: white; }
.inline { display: inline; }
.inline button { padding: .4rem .7rem; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .65rem; border-bottom: 1px solid #2b3242; text-align: left; }
th { color: var(--muted); font-size: .9rem; }
.form-card { max-width: 480px; margin: 2rem auto; }
label { display: block; margin-top: .8rem; color: var(--muted); }
input { width: 100%; padding: .7rem; margin-top: .25rem; border-radius: 10px; border: 1px solid #3a4356; background: #0f131d; color: var(--text); }
.checkbox { display: flex; align-items: center; gap: .5rem; }
.checkbox input { width: auto; }
.readable { max-width: 820px; line-height: 1.65; }
.warning { color: #ffdca3; }
.board-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-bottom: .8rem; color: var(--muted); }
.board-table td:first-child { width: 80px; color: var(--muted); }
.white-checkers { color: #ffffff; font-weight: 700; }
.black-checkers { color: #ffb3a7; font-weight: 700; }
.move-list { display: grid; gap: .5rem; }
.move-form button { width: 100%; text-align: left; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; }
.stats-grid div { background: var(--panel2); border-radius: 14px; padding: 1rem; }
.stats-grid strong { display: block; font-size: 1.8rem; }
.stats-grid span { color: var(--muted); }
@media (max-width: 800px) {
    .hero, .grid.two { grid-template-columns: 1fr; }
    .site-header { align-items: flex-start; flex-direction: column; }
}

/* Takhtenard v2 graphical board */
.eyebrow { margin: 0 0 .25rem; color: var(--accent); text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 800; }
.muted, .label { color: var(--muted); }
.dot-separator { color: var(--muted); padding: 0 .35rem; }
.match-shell { display: grid; gap: 1rem; }
.match-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.match-header h1 { margin: 0; font-size: clamp(2rem, 4vw, 3.4rem); }
.turn-card { min-width: 210px; background: var(--panel2); border: 1px solid #3a4356; border-radius: 16px; padding: 1rem; text-align: right; }
.turn-card span, .turn-card small { display: block; color: var(--muted); }
.turn-card strong { display: block; font-size: 1.5rem; }
.turn-card.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(217, 173, 91, .15); }
.leave-warning { margin: 0; padding: .75rem 1rem; border: 1px solid rgba(217, 173, 91, .35); border-radius: 14px; background: rgba(217, 173, 91, .08); }
.game-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 1rem; align-items: start; }
.board-card { overflow: hidden; }
.board-toolbar { display: grid; grid-template-columns: auto auto minmax(220px, 1fr); gap: 1rem; align-items: center; margin-bottom: 1rem; }
.label { display: block; margin-bottom: .35rem; font-size: .85rem; }
.dice-row { display: flex; gap: .4rem; align-items: center; min-height: 2.6rem; }
.die { display: inline-grid; place-items: center; width: 2.35rem; height: 2.35rem; border-radius: .55rem; background: #f7f1e2; color: #19130d; font-weight: 900; box-shadow: inset 0 -3px 0 rgba(0,0,0,.18), 0 4px 12px rgba(0,0,0,.25); }
.die.small { width: 1.85rem; height: 1.85rem; border-radius: .45rem; font-size: .9rem; }
.empty-state { color: var(--muted); }
.selection-help { color: #f3dfb6; background: rgba(217, 173, 91, .08); border: 1px solid rgba(217, 173, 91, .25); border-radius: 12px; padding: .75rem; min-height: 3.1rem; display: flex; align-items: center; }
.tak-board { position: relative; display: grid; grid-template-columns: 70px repeat(6, minmax(38px, 1fr)) 74px repeat(6, minmax(38px, 1fr)) 70px; grid-template-rows: minmax(260px, 1fr) minmax(70px, auto) minmax(260px, 1fr); gap: 0; min-height: 660px; padding: 18px; border-radius: 22px; background: radial-gradient(circle at center, rgba(217,173,91,.18), transparent 32%), linear-gradient(135deg, #5b331d, #2a160d 42%, #694124); border: 10px solid #201008; box-shadow: inset 0 0 0 3px rgba(255,255,255,.08), inset 0 0 45px rgba(0,0,0,.55), 0 18px 45px rgba(0,0,0,.35); }
.points-row { display: contents; }
.board-point { position: relative; border: 0; padding: 0; min-width: 0; background: transparent; min-height: 245px; cursor: default; display: flex; justify-content: center; color: inherit; }
.board-point::before { content: ""; position: absolute; left: 5%; right: 5%; z-index: 0; opacity: .92; filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); }
.board-point.top { align-items: flex-start; }
.board-point.bottom { align-items: flex-end; grid-row: 3; }
.board-point.top::before { top: 0; border-left: min(3.1vw, 34px) solid transparent; border-right: min(3.1vw, 34px) solid transparent; border-top: 235px solid #c99a57; }
.board-point.bottom::before { bottom: 0; border-left: min(3.1vw, 34px) solid transparent; border-right: min(3.1vw, 34px) solid transparent; border-bottom: 235px solid #c99a57; }
.board-point.odd-point.top::before { border-top-color: #7b251d; }
.board-point.odd-point.bottom::before { border-bottom-color: #7b251d; }
.board-point.even-point.top::before { border-top-color: #e0b76b; }
.board-point.even-point.bottom::before { border-bottom-color: #e0b76b; }
.point-number { position: absolute; z-index: 3; color: rgba(255,255,255,.75); font-size: .78rem; font-weight: 800; text-shadow: 0 1px 2px rgba(0,0,0,.8); }
.board-point.top .point-number { top: 7px; }
.board-point.bottom .point-number { bottom: 7px; }
.checker-stack { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: .18rem; padding: 2rem .15rem; }
.board-point.bottom .checker-stack { flex-direction: column-reverse; }
.checker { width: clamp(28px, 4.8vw, 50px); height: clamp(28px, 4.8vw, 50px); border-radius: 50%; border: 2px solid rgba(255,255,255,.25); box-shadow: inset 0 -5px 0 rgba(0,0,0,.22), inset 0 4px 0 rgba(255,255,255,.20), 0 4px 9px rgba(0,0,0,.42); }
.checker.white { background: radial-gradient(circle at 35% 28%, #fff, #e9dcc0 58%, #b59b72); }
.checker.black { background: radial-gradient(circle at 35% 28%, #654b40, #1d1513 65%, #050505); border-color: rgba(255,255,255,.14); }
.checker-count { display: inline-grid; place-items: center; min-width: 2rem; height: 2rem; padding: 0 .35rem; border-radius: 999px; background: #111827; color: var(--accent); font-weight: 900; border: 1px solid rgba(217,173,91,.5); }
.bearoff-zone { position: relative; grid-row: 1 / span 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; border-radius: 16px; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.08); color: var(--muted); padding: .5rem; text-align: center; }
.bearoff-zone strong { color: var(--text); font-size: 1.6rem; }
.black-off { grid-column: 1; }
.white-off { grid-column: 15; }
.bar-zone { grid-column: 8; grid-row: 1 / span 3; display: grid; grid-template-rows: 1fr 1fr; gap: .8rem; padding: .35rem; background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(255,255,255,.06), rgba(0,0,0,.28)); border-left: 1px solid rgba(255,255,255,.1); border-right: 1px solid rgba(0,0,0,.45); }
.bar-stack { border: 1px solid rgba(255,255,255,.1); border-radius: 14px; color: var(--text); background: rgba(0,0,0,.2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; padding: .4rem; cursor: default; }
.bar-stack span { color: var(--muted); font-size: .78rem; }
.bar-stack strong { font-size: 1.55rem; }
.board-center-label { grid-column: 2 / span 13; grid-row: 2; display: grid; place-items: center; text-align: center; color: rgba(255,255,255,.78); pointer-events: none; }
.board-center-label strong { font-size: clamp(1.5rem, 4vw, 3rem); letter-spacing: .12em; text-transform: uppercase; }
.board-center-label span { color: rgba(255,255,255,.55); }
.top-row.left-home .board-point:nth-of-type(1), .bottom-row.left-home .board-point:nth-of-type(1) { grid-column: 2; }
.top-row.left-home .board-point:nth-of-type(2), .bottom-row.left-home .board-point:nth-of-type(2) { grid-column: 3; }
.top-row.left-home .board-point:nth-of-type(3), .bottom-row.left-home .board-point:nth-of-type(3) { grid-column: 4; }
.top-row.left-home .board-point:nth-of-type(4), .bottom-row.left-home .board-point:nth-of-type(4) { grid-column: 5; }
.top-row.left-home .board-point:nth-of-type(5), .bottom-row.left-home .board-point:nth-of-type(5) { grid-column: 6; }
.top-row.left-home .board-point:nth-of-type(6), .bottom-row.left-home .board-point:nth-of-type(6) { grid-column: 7; }
.top-row.right-home .board-point:nth-of-type(1), .bottom-row.right-home .board-point:nth-of-type(1) { grid-column: 9; }
.top-row.right-home .board-point:nth-of-type(2), .bottom-row.right-home .board-point:nth-of-type(2) { grid-column: 10; }
.top-row.right-home .board-point:nth-of-type(3), .bottom-row.right-home .board-point:nth-of-type(3) { grid-column: 11; }
.top-row.right-home .board-point:nth-of-type(4), .bottom-row.right-home .board-point:nth-of-type(4) { grid-column: 12; }
.top-row.right-home .board-point:nth-of-type(5), .bottom-row.right-home .board-point:nth-of-type(5) { grid-column: 13; }
.top-row.right-home .board-point:nth-of-type(6), .bottom-row.right-home .board-point:nth-of-type(6) { grid-column: 14; }
.board-point.legal-source, .bar-stack.legal-source { cursor: pointer; }
.board-point.legal-source::after, .bar-stack.legal-source::after { content: ""; position: absolute; inset: 8px; border-radius: 12px; border: 2px solid rgba(217,173,91,.75); box-shadow: 0 0 18px rgba(217,173,91,.35); pointer-events: none; }
.bar-stack { position: relative; }
.board-point.selected-source::after, .bar-stack.selected-source::after { border-color: #ffffff; box-shadow: 0 0 22px rgba(255,255,255,.45); }
.board-point.legal-target, .bearoff-zone.bearoff-target { cursor: pointer; outline: 3px solid rgba(107, 222, 137, .8); outline-offset: -7px; box-shadow: inset 0 0 30px rgba(107,222,137,.18); }
.board-point.legal-target::after, .bearoff-zone.bearoff-target::after { content: attr(data-move-die); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 4; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: .55rem; background: #f7f1e2; color: #19130d; font-weight: 900; box-shadow: 0 6px 16px rgba(0,0,0,.4); }
.board-point.hit-target { outline-color: rgba(255, 105, 97, .9); }
.side-panel { display: grid; gap: 1rem; }
.move-panel h2 { margin-top: 0; }
.fallback-moves { max-height: 360px; overflow: auto; padding-right: .25rem; }
@media (max-width: 1050px) {
    .game-layout { grid-template-columns: 1fr; }
    .side-panel { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
    .match-header { flex-direction: column; align-items: stretch; }
    .turn-card { text-align: left; }
    .board-toolbar { grid-template-columns: 1fr; }
    .tak-board { min-height: 520px; padding: 10px; grid-template-columns: 48px repeat(6, minmax(24px, 1fr)) 52px repeat(6, minmax(24px, 1fr)) 48px; grid-template-rows: minmax(205px, 1fr) 54px minmax(205px, 1fr); border-width: 6px; }
    .board-point { min-height: 190px; }
    .board-point.top::before { border-left-width: 18px; border-right-width: 18px; border-top-width: 185px; }
    .board-point.bottom::before { border-left-width: 18px; border-right-width: 18px; border-bottom-width: 185px; }
    .point-number { font-size: .65rem; }
    .bearoff-zone span, .bar-stack span { font-size: .62rem; }
    .board-center-label strong { letter-spacing: .05em; }
}

/* Takhtenard v2.1 drag-and-drop board interaction */
.tak-board {
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.board-point.legal-source,
.bar-stack.legal-source,
.checker.can-drag {
    cursor: grab;
}
.board-point.is-dragging-source,
.bar-stack.is-dragging-source {
    opacity: .72;
}
.drag-ghost {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    pointer-events: none;
    width: clamp(36px, 7vw, 58px);
    height: clamp(36px, 7vw, 58px);
    opacity: .92;
    will-change: transform;
}
.legal-target.drag-over-target,
.bearoff-target.drag-over-target {
    outline-color: #ffffff;
    box-shadow: inset 0 0 35px rgba(255,255,255,.25), 0 0 22px rgba(255,255,255,.28);
}
@media (max-width: 760px) {
    .selection-help { font-size: .92rem; }
    .drag-ghost { width: 42px; height: 42px; }
}

/* Takhtenard v2.2: corrected responsive board sizing. The board must fit on mobile instead of being clipped. */
.dice-note {
    display: block;
    margin-top: .25rem;
    color: #f3dfb6;
    font-size: .82rem;
}
.tak-board {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    aspect-ratio: 16 / 9;
    grid-template-columns: clamp(34px, 6%, 70px) repeat(6, minmax(0, 1fr)) clamp(38px, 6.5%, 74px) repeat(6, minmax(0, 1fr)) clamp(34px, 6%, 70px);
    grid-template-rows: minmax(0, 1fr) clamp(42px, 10%, 76px) minmax(0, 1fr);
}
.board-card,
.board-point,
.bar-zone,
.bearoff-zone {
    min-width: 0;
}
.board-point {
    min-height: 0;
    overflow: hidden;
}
.board-point::before {
    border: 0 !important;
    left: 6%;
    right: 6%;
    height: 92%;
    width: auto;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,.35));
}
.board-point.top::before {
    top: 0;
    background: #c99a57;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.board-point.bottom::before {
    bottom: 0;
    background: #c99a57;
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
}
.board-point.odd-point.top::before,
.board-point.odd-point.bottom::before {
    background: #7b251d;
}
.board-point.even-point.top::before,
.board-point.even-point.bottom::before {
    background: #e0b76b;
}
.checker {
    width: clamp(20px, 3.6vw, 50px);
    height: clamp(20px, 3.6vw, 50px);
}

@media (max-width: 760px) {
    body { overflow-x: hidden; }
    .container { max-width: 100vw; padding: .45rem; }
    .card, .ad-slot { border-radius: 14px; padding: .7rem; }
    .match-shell { gap: .6rem; }
    .match-header h1 { font-size: 1.7rem; }
    .match-header p { margin: .35rem 0 0; font-size: .86rem; }
    .dot-separator { display: none; }
    .turn-card { min-width: 0; padding: .7rem; }
    .board-toolbar { gap: .55rem; margin-bottom: .55rem; }
    .dice-row { min-height: 2rem; }
    .die { width: 1.9rem; height: 1.9rem; border-radius: .45rem; }
    .die.small { width: 1.45rem; height: 1.45rem; font-size: .78rem; }
    .selection-help { min-height: 0; padding: .55rem; font-size: .84rem; }
    .tak-board {
        padding: 6px;
        border-width: 4px;
        border-radius: 14px;
        aspect-ratio: 16 / 10;
        grid-template-columns: 7% repeat(6, minmax(0, 1fr)) 8% repeat(6, minmax(0, 1fr)) 7%;
        grid-template-rows: minmax(0, 1fr) 15% minmax(0, 1fr);
    }
    .checker-stack { padding: 1.05rem .02rem; gap: 0; }
    .checker { width: clamp(14px, 5vw, 22px); height: clamp(14px, 5vw, 22px); border-width: 1px; }
    .checker-stack .checker + .checker { margin-top: -3px; }
    .board-point.bottom .checker-stack .checker + .checker { margin-top: -3px; }
    .point-number { font-size: .52rem; }
    .board-point.top .point-number { top: 2px; }
    .board-point.bottom .point-number { bottom: 2px; }
    .bar-zone { gap: .25rem; padding: .15rem; }
    .bar-stack { padding: .15rem; border-radius: 8px; }
    .bar-stack strong,
    .bearoff-zone strong { font-size: .95rem; }
    .bar-stack span,
    .bearoff-zone span { font-size: .48rem; line-height: 1.1; }
    .bearoff-zone { padding: .15rem; border-radius: 8px; }
    .board-center-label strong { font-size: clamp(.75rem, 5vw, 1.35rem); letter-spacing: .04em; }
    .board-point.legal-target::after,
    .bearoff-zone.bearoff-target::after { width: 1.35rem; height: 1.35rem; font-size: .78rem; border-radius: .35rem; }
    .board-point.legal-source::after,
    .bar-stack.legal-source::after { inset: 3px; border-radius: 8px; border-width: 1px; }
    .board-point.legal-target,
    .bearoff-zone.bearoff-target { outline-width: 2px; outline-offset: -4px; }
    .side-panel { gap: .55rem; }
    .fallback-moves { max-height: 210px; }
}

@media (max-width: 420px) {
    .container { padding: .25rem; }
    .card, .ad-slot { padding: .5rem; }
    .tak-board {
        padding: 4px;
        border-width: 3px;
        aspect-ratio: 16 / 10.5;
    }
    .checker { width: clamp(12px, 4.7vw, 19px); height: clamp(12px, 4.7vw, 19px); }
    .checker-stack .checker + .checker { margin-top: -4px; }
    .checker-count { min-width: 1.15rem; height: 1.15rem; font-size: .62rem; }
}