:root {
    --arena-navy: #071426;
    --arena-panel: #0d2138;
    --arena-panel-soft: #142c47;
    --arena-gold: #f4b942;
    --arena-red: #d83a43;
    --arena-teal: #18b7a0;
    --arena-cream: #f4ead6;
    --arena-ink: #102238;
    --square-light: #e8d7b8;
    --square-dark: #557a68;
    --focus: #ffd55a;
}

* { box-sizing: border-box; }

body.arena-body {
    min-height: 100vh;
    margin: 0;
    color: #f8fafc;
    background:
        radial-gradient(circle at 12% 18%, rgba(24, 183, 160, .12), transparent 28rem),
        radial-gradient(circle at 88% 5%, rgba(244, 185, 66, .12), transparent 25rem),
        var(--arena-navy);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.arena-nav {
    position: relative;
    z-index: 10;
    padding: .85rem 0;
    border-bottom: 1px solid rgba(255,255,255,.09);
    background: rgba(7,20,38,.92);
    backdrop-filter: blur(12px);
}

.arena-brand {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    color: #fff;
    text-decoration: none;
}

.arena-brand > span:last-child { display: grid; line-height: 1.05; }
.arena-brand strong { font-size: 1rem; }
.arena-brand small { margin-top: .28rem; color: #98a9bd; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }

.brand-mark {
    display: grid;
    width: 2.65rem;
    height: 2.65rem;
    place-items: center;
    border: 2px solid var(--arena-gold);
    border-radius: 50%;
    color: var(--arena-gold);
    background: #0d2138;
    font-weight: 900;
    box-shadow: 0 0 0 4px rgba(244,185,66,.08);
}

.coin-pill, .back-link {
    padding: .58rem .9rem;
    border: 1px solid rgba(244,185,66,.34);
    border-radius: 999px;
    color: #ffe3a0;
    background: rgba(244,185,66,.09);
    font-weight: 800;
    text-decoration: none;
}

.hero-section { padding: clamp(3.5rem, 9vw, 7rem) 0; }
.eyebrow, .section-heading small { color: var(--arena-teal); font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.hero-section h1 { max-width: 12ch; margin: .75rem 0 1.25rem; font-size: clamp(2.7rem, 7vw, 5.8rem); font-weight: 900; line-height: .94; letter-spacing: -.055em; }
.hero-section h1 span { color: var(--arena-gold); }
.hero-copy { max-width: 43rem; color: #b9c6d6; font-size: clamp(1.02rem, 2vw, 1.22rem); line-height: 1.7; }

.btn.arena-primary, .btn.arena-secondary, .btn.arena-danger {
    border-radius: .8rem;
    font-weight: 850;
}
.btn.arena-primary { border-color: var(--arena-gold); color: #1c1608; background: var(--arena-gold); }
.btn.arena-primary:hover { border-color: #ffd575; background: #ffd575; }
.btn.arena-secondary { border-color: rgba(255,255,255,.18); color: #e9eef5; background: rgba(255,255,255,.07); }
.btn.arena-secondary:hover { border-color: rgba(255,255,255,.35); color: #fff; background: rgba(255,255,255,.13); }
.btn.arena-danger { border-color: #ef5962; color: #fff; background: #b42632; }
.trust-row { display: flex; flex-wrap: wrap; gap: .85rem 1.2rem; margin-top: 1.4rem; color: #91a5ba; font-size: .86rem; }

.lobby-card, .status-card, .move-card {
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 1.2rem;
    background: linear-gradient(145deg, rgba(20,44,71,.92), rgba(10,29,50,.96));
    box-shadow: 0 1.5rem 4rem rgba(0,0,0,.28);
}

.lobby-card { padding: 1rem; }
.lobby-card-head { display: flex; align-items: center; justify-content: space-between; padding: .35rem .35rem 1rem; }
.lobby-card-head > div { display: grid; }
.lobby-card-head small { color: #8499ae; font-size: .66rem; letter-spacing: .12em; }
.online-dot { color: #8ef4c6; font-size: .8rem; }
.online-dot::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .4rem; border-radius: 50%; background: #32dc8c; box-shadow: 0 0 .7rem #32dc8c; }

.quick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.quick-grid > * { display: grid; min-height: 8.3rem; padding: 1rem; align-content: end; border: 1px solid rgba(255,255,255,.08); border-radius: .85rem; color: #fff; background: rgba(255,255,255,.045); text-decoration: none; }
.quick-grid > a { border-color: rgba(244,185,66,.5); background: linear-gradient(145deg, rgba(244,185,66,.2), rgba(24,183,160,.12)); }
.quick-grid span { margin-bottom: auto; font-size: 1.6rem; }
.quick-grid small { color: #9fb0c2; font-size: .73rem; }
.quick-grid .locked { opacity: .58; }

.feature-section { padding: 1rem 0 6rem; }
.section-heading { margin-bottom: 1.5rem; }
.section-heading h2 { margin-top: .35rem; font-weight: 850; }
.feature-card { height: 100%; padding: 1.3rem; border: 1px solid rgba(255,255,255,.09); border-radius: 1rem; background: rgba(255,255,255,.04); }
.feature-card.active { border-color: rgba(244,185,66,.42); }
.feature-card > span { color: var(--arena-gold); font-weight: 900; }
.feature-card h3 { margin: 1rem 0 .5rem; font-size: 1.15rem; }
.feature-card p { margin: 0; color: #9eafc1; line-height: 1.6; }
.arena-footer { padding: 1.4rem 0; border-top: 1px solid rgba(255,255,255,.08); color: #7890a8; text-align: center; font-size: .82rem; }

/* Local game */
.game-shell { display: grid; grid-template-columns: minmax(0, 720px) minmax(270px, 360px); gap: clamp(1rem, 3vw, 2rem); align-items: start; justify-content: center; padding-top: 1.4rem; padding-bottom: 2rem; }
.game-stage { min-width: 0; }
.player-strip { display: grid; grid-template-columns: 2.8rem minmax(7rem, auto) 1fr; gap: .7rem; align-items: center; min-height: 4rem; padding: .55rem .7rem; }
.player-strip small { display: block; color: #7890a8; font-size: .62rem; letter-spacing: .12em; }
.player-strip strong { font-size: .92rem; }
.player-avatar { display: grid; width: 2.45rem; height: 2.45rem; place-items: center; border-radius: .7rem; color: #142033; background: var(--arena-cream); font-weight: 900; }
.player-strip.opponent .player-avatar { color: #fff; background: #26394d; }
.player-strip.current { border-radius: .7rem; background: rgba(24,183,160,.1); }
.player-strip.current .player-avatar { box-shadow: 0 0 0 2px var(--arena-teal); }
.captured { min-height: 1.5rem; color: #d7e0ea; text-align: right; letter-spacing: -.12rem; }

.board-wrap { position: relative; width: min(100%, calc(100vh - 12.5rem)); min-width: 280px; margin: .35rem auto; aspect-ratio: 1; border: clamp(5px, 1vw, 10px) solid #1b3046; border-radius: .35rem; background: #1b3046; box-shadow: 0 1.2rem 3rem rgba(0,0,0,.38); }
.chessboard { display: grid; width: 100%; height: 100%; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); overflow: hidden; }
.square { position: relative; display: grid; padding: 0; place-items: center; border: 0; border-radius: 0; cursor: pointer; user-select: none; }
.square.light { background: var(--square-light); }
.square.dark { background: var(--square-dark); }
.square:hover::after, .square.selected::after, .square.legal::after, .square.last-move::after {
    content: ""; position: absolute; inset: 7%; border-radius: 12%; pointer-events: none;
}
.square:hover::after { border: 2px solid rgba(255,255,255,.44); }
.square.selected::after { border: 4px solid var(--focus); }
.square.legal::after { inset: 36%; border-radius: 50%; background: rgba(14,30,38,.34); }
.square.legal.capture::after { inset: 8%; border: 5px solid rgba(122,26,34,.52); background: transparent; }
.square.last-move { box-shadow: inset 0 0 0 999px rgba(250,214,69,.23); }
.square .coord { position: absolute; z-index: 1; color: rgba(18,39,47,.58); font-size: clamp(.48rem, 1.3vw, .72rem); font-weight: 800; line-height: 1; pointer-events: none; }
.square .rank { top: .2rem; left: .22rem; }
.square .file { right: .22rem; bottom: .18rem; }
.piece-svg {
    position: relative;
    z-index: 2;
    width: 88%;
    height: 91%;
    overflow: visible;
    filter: drop-shadow(0 .25rem .16rem rgba(0,0,0,.38));
    pointer-events: none;
    transform: translateY(-1%);
    transition: transform .16s ease, filter .16s ease;
}
.square:hover .piece-svg,
.square.selected .piece-svg {
    transform: translateY(-5%) scale(1.035);
    filter: drop-shadow(0 .42rem .23rem rgba(0,0,0,.46));
}
.piece-ground-shadow { fill: rgba(4,13,20,.34); filter: blur(1.2px); }
.piece-extrusion,
.piece-rim,
.piece-face,
.piece-highlight { paint-order: stroke fill; font-weight: 700; }

/* Ivory pieces: warm carved-stone face with a darker bevel. */
.piece-svg.white .piece-extrusion { fill: #756554; stroke: #2f3b48; stroke-width: 2.6px; }
.piece-svg.white .piece-rim { fill: #c5ad86; stroke: #314052; stroke-width: 2.25px; }
.piece-svg.white .piece-face { fill: #f5e8c9; stroke: #6d5d4b; stroke-width: 1.15px; }
.piece-svg.white .piece-highlight {
    fill: #fffdf1;
    stroke: transparent;
    opacity: .34;
    clip-path: inset(0 47% 0 0);
}

/* Black pieces: polished gunmetal face with a cool metallic edge. */
.piece-svg.black .piece-extrusion { fill: #07121f; stroke: #d3dce1; stroke-width: 2.35px; }
.piece-svg.black .piece-rim { fill: #263f55; stroke: #06111d; stroke-width: 2.15px; }
.piece-svg.black .piece-face { fill: #12283c; stroke: #8193a0; stroke-width: 1px; }
.piece-svg.black .piece-highlight {
    fill: #8eb7c7;
    stroke: transparent;
    opacity: .22;
    clip-path: inset(0 52% 0 0);
}

.game-panel { display: grid; gap: .85rem; position: sticky; top: 1rem; }
.status-card, .move-card { padding: 1rem; box-shadow: none; }
.status-card small, .panel-title span { color: var(--arena-teal); font-size: .66rem; font-weight: 800; letter-spacing: .12em; }
.status-card h1 { margin: .35rem 0; font-size: 1.35rem; font-weight: 900; }
.status-card p { margin: 0; color: #9fb0c2; font-size: .86rem; line-height: 1.5; }
.panel-title { display: flex; align-items: center; justify-content: space-between; }
.panel-title h2 { margin: 0; font-size: 1rem; }
.move-history { max-height: 17rem; margin: .8rem 0 0; padding-left: 2.2rem; overflow: auto; color: #bfcbd7; }
.move-history li { padding: .25rem .15rem; border-bottom: 1px solid rgba(255,255,255,.06); }
.move-history .empty-history { color: #71879d; }
.game-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: .55rem; }
.game-actions .arena-danger { grid-column: 1 / -1; }
.keyboard-note { margin: 0; color: #70879e; font-size: .74rem; text-align: center; }

@media (max-width: 991.98px) {
    .game-shell { grid-template-columns: 1fr; max-width: 760px; }
    .game-panel { position: static; }
    .board-wrap { width: min(100%, calc(100vh - 11rem)); }
}
@media (max-width: 575.98px) {
    .arena-nav { padding: .6rem 0; }
    .brand-mark { width: 2.25rem; height: 2.25rem; font-size: .85rem; }
    .arena-brand strong { font-size: .88rem; }
    .coin-pill, .back-link { padding: .45rem .65rem; font-size: .75rem; }
    .hero-section { padding-top: 2.8rem; }
    .quick-grid { grid-template-columns: 1fr 1fr; }
    .quick-grid > * { min-height: 7rem; padding: .75rem; }
    .game-shell { padding-right: .55rem; padding-left: .55rem; }
    .board-wrap { width: 100%; min-width: 0; border-width: 4px; }
    .player-strip { grid-template-columns: 2.45rem 6.2rem 1fr; padding-right: .2rem; padding-left: .2rem; }
    .piece-svg { width: 88%; height: 88%; }
}


/* Production 3D chess pieces */
.piece-image {
    position: relative;
    z-index: 2;
    display: block;
    width: 96%;
    height: 96%;
    object-fit: contain;
    object-position: center bottom;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    filter: drop-shadow(0 .18rem .12rem rgba(0,0,0,.46));
    transform: translateY(-2%);
    transition: transform .16s ease, filter .16s ease;
}
.square:hover .piece-image,
.square.selected .piece-image {
    transform: translateY(-7%) scale(1.045);
    filter: drop-shadow(0 .34rem .2rem rgba(0,0,0,.58));
}


/* Smooth in-game piece movement and captured-piece flight */
.piece-motion-ghost {
    position:fixed;
    z-index:1400;
    display:grid;
    place-items:center;
    margin:0;
    padding:0;
    pointer-events:none;
    user-select:none;
    -webkit-user-select:none;
    -webkit-touch-callout:none;
    will-change:transform,opacity;
    transform-origin:center;
    contain:layout style;
}
.piece-motion-visual {
    display:block !important;
    position:static !important;
    width:100% !important;
    height:100% !important;
    margin:0 !important;
    opacity:1 !important;
    pointer-events:none !important;
    user-select:none !important;
    -webkit-user-drag:none !important;
    transition:none !important;
}
.piece-arrival-hidden .piece-image,
.piece-arrival-hidden .piece-glyph,
.capture-arrival-hidden {
    opacity:0 !important;
}
.chessboard.is-piece-moving .square {
    cursor:default;
}
@media (prefers-reduced-motion:reduce) {
    .piece-motion-ghost { display:none !important; }
    .piece-arrival-hidden .piece-image,
    .piece-arrival-hidden .piece-glyph,
    .capture-arrival-hidden { opacity:1 !important; }
}


/* Checked and checkmated King danger state */
.square.king-in-check::before,
.square.king-checkmated::before {
    content:"";
    position:absolute;
    z-index:1;
    left:13%;
    right:13%;
    bottom:5%;
    height:27%;
    border-radius:50%;
    pointer-events:none;
    transform-origin:center;
    background:radial-gradient(ellipse at center,
        rgba(255,238,210,.96) 0 8%,
        rgba(255,76,45,.98) 24%,
        rgba(210,0,0,.86) 52%,
        rgba(126,0,0,.28) 72%,
        transparent 78%);
    box-shadow:0 0 9px rgba(255,32,20,.95),0 0 18px rgba(190,0,0,.76);
}
.square.king-in-check::before {
    animation:king-check-danger 1.05s ease-in-out infinite;
}
.square.king-checkmated::before {
    height:34%;
    bottom:2%;
    background:radial-gradient(ellipse at center,
        #fff1d5 0 7%,
        #ff2a1a 22%,
        #bd0000 50%,
        rgba(92,0,0,.38) 72%,
        transparent 80%);
    animation:king-checkmate-danger .52s ease-in-out infinite alternate;
}
.square.king-checkmated {
    animation:king-checkmate-square .72s ease-in-out 3;
}
@keyframes king-check-danger {
    0%,100% { opacity:.66; transform:scale(.76,.7); filter:blur(.2px); }
    50% { opacity:1; transform:scale(1.08,.94); filter:blur(0); }
}
@keyframes king-checkmate-danger {
    from { opacity:.78; transform:scale(.82,.74); box-shadow:0 0 9px #ff2818,0 0 17px rgba(190,0,0,.78); }
    to { opacity:1; transform:scale(1.18,1); box-shadow:0 0 15px #ff4029,0 0 29px rgba(215,0,0,.94); }
}
@keyframes king-checkmate-square {
    0%,100% { box-shadow:inset 0 0 0 0 rgba(255,0,0,0); }
    35% { box-shadow:inset 0 0 18px 5px rgba(255,19,10,.62); }
    55% { box-shadow:inset 0 0 6px 2px rgba(255,19,10,.25); }
    75% { box-shadow:inset 0 0 22px 6px rgba(255,19,10,.72); }
}
@media (prefers-reduced-motion:reduce) {
    .square.king-in-check::before,
    .square.king-checkmated::before,
    .square.king-checkmated {
        animation:none !important;
    }
}