.hex-overlay { position: fixed; inset: 0; z-index: 60; display: none; overflow: auto; padding: 20px; background: rgba(3, 7, 14, .92); }
.hex-overlay.open { display: block; }
.hex-room { width: min(1540px, 100%); min-height: calc(100vh - 40px); margin: 0 auto; overflow: hidden; color: #edf8f7; border: 1px solid rgba(89, 227, 198, .24); border-radius: 28px; background: radial-gradient(circle at 50% 14%, rgba(54, 106, 130, .18), transparent 37%), #080f19; }
.hex-score-strip { display: grid; grid-template-columns: 1fr 180px 1fr; gap: 18px; align-items: center; padding: 20px 28px; border-bottom: 1px solid rgba(147, 169, 193, .14); }
#hex-match-id,.hex-turn-status{display:none!important}
.hex-score-strip article { display: flex; align-items: center; gap: 12px; min-width: 0; }.hex-score-strip article.opponent { justify-content: flex-end; text-align: right; }.hex-score-strip small, .hex-turn-status small { display: block; color: #83a6aa; font: 10px/1.3 'DM Mono', monospace; letter-spacing: .1em; }.hex-score-strip b { display: block; font-size: 16px; }.hex-clock { text-align: center; }.hex-clock small { color: #a993e5; font: 10px 'DM Mono', monospace; letter-spacing: .14em; }.hex-clock > b { display: block; font: 800 26px/1 'DM Mono', monospace; }.hex-clock span { display: flex; justify-content: center; gap: 7px; margin-top: 7px; align-items: center; }.hex-clock i { width: 7px; height: 7px; border-radius: 100%; background: #43e5c2; box-shadow: 0 0 12px #43e5c2; }.hex-clock em { color: #bcb0ea; font: 11px 'DM Mono', monospace; }
.hex-room-body { display: grid; grid-template-columns: 220px minmax(0, 1fr) 270px; gap: 22px; padding: 28px; align-items: center; }.hex-stage { min-width: 0; }.hex-turn-status { display: flex; justify-content: space-between; align-items: center; margin: 0 0 14px; }.hex-turn-status strong { color: #62e9c8; font-size: 13px; }
.hex-info-panel, .hex-panel { border: 1px solid rgba(127, 165, 185, .19); border-radius: 18px; background: linear-gradient(145deg, rgba(14, 28, 42, .92), rgba(8, 17, 27, .88)); }.hex-info-panel { align-self: stretch; padding: 21px 18px; color: #a8c1c4; font-size: 13px; line-height: 1.55; }.hex-info-panel .demo-badge { display: inline-block; margin-bottom: 12px; }.hex-info-panel p + p { padding-top: 13px; border-top: 1px solid rgba(147, 169, 193, .13); }.hex-pie-copy b { color: #c99cff; }
/* SVG'nin viewBox'ı gerçek rhombus geometriyi taşır: browser yalnızca tek parça ölçekleme yapar. */
.hex-board-shell { width: min(100%, 970px); margin: 0 auto; padding: 12px; filter: drop-shadow(0 21px 27px rgba(0, 0, 0, .35)); }.hex-board { display: block; width: 100%; height: auto; overflow: visible; }.hex-board-edge { stroke-width: 27; stroke-linecap: square; pointer-events: none; }.hex-board-edge.teal { stroke: #3ddcbd; }.hex-board-edge.purple { stroke: #9865db; }.hex-cell { stroke: #53646c; stroke-width: 3; vector-effect: non-scaling-stroke; fill: #d8e4e1; transition: fill .16s ease, filter .16s ease; outline: none; }.hex-cell.empty { fill: #d9e4e2; }.hex-cell.teal { fill: #24bba7; stroke: #74f3d7; }.hex-cell.purple { fill: #8053bd; stroke: #c09afa; }.hex-cell.playable { cursor: pointer; }.hex-cell.playable:hover { fill: #edf8f5; stroke: #4be5c5; stroke-width: 5; filter: drop-shadow(0 0 10px rgba(72, 227, 195, .72)); }.hex-cell.playable:focus-visible { stroke: #fff2b4; stroke-width: 6; filter: drop-shadow(0 0 10px rgba(255, 242, 180, .72)); }.hex-cell.winning { stroke: #fff2b4; stroke-width: 7; filter: drop-shadow(0 0 12px currentColor); animation: hex-path-pulse 1s ease-in-out infinite alternate; }@keyframes hex-path-pulse { from { opacity: .82; } to { opacity: 1; } }
.hex-panel { position: sticky; top: 16px; }.hex-rule { color: #a7c7cb; line-height: 1.55; font-size: 13px; border-left: 2px solid #54e5c4; padding-left: 10px; }.hex-panel #hex-swap { width: 100%; margin: 10px 0 0; color: #d8c5ff; border-color: rgba(165, 108, 235, .52); }
/* Katalog preview'ı, oyun içi SVG tahtasından tamamen bağımsızdır. */
.hex-card-visual { display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 38%, rgba(47, 188, 165, .19), transparent 40%), radial-gradient(circle at 72% 68%, rgba(137, 91, 201, .17), transparent 42%), #101c2a; }
.mini-hex-board { display: block; width: min(76%, 244px); height: auto; filter: drop-shadow(0 13px 16px rgba(0, 0, 0, .34)); }
.mini-hex-edges { display: none; }
.mini-hex-cells use { fill: #cddbd9; stroke: #5d7077; stroke-width: 1.2; }.mini-hex-cells use.teal { fill: #27bda8; stroke: #79f0d6; }.mini-hex-cells use.purple { fill: #8055bc; stroke: #c29afa; }.hex-live { background: rgba(87, 230, 194, .15); color: #7affdc; }
@media (max-width: 1120px) { .hex-room-body { grid-template-columns: minmax(0, 1fr) 280px; }.hex-info-panel { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; }.hex-info-panel .demo-badge { grid-column: 1 / -1; margin-bottom: 0; }.hex-info-panel p + p { padding-top: 0; border-top: 0; border-left: 1px solid rgba(147, 169, 193, .13); padding-left: 15px; } }
@media (max-width: 850px) { .hex-overlay { padding: 0; }.hex-room { min-height: 100vh; border-radius: 0; }.hex-room-body { grid-template-columns: 1fr; padding: 16px; }.hex-panel { position: static; }.hex-score-strip { grid-template-columns: 1fr 90px 1fr; gap: 7px; padding: 14px; }.hex-score-strip small { font-size: 8px; }.hex-score-strip b { font-size: 13px; }.hex-clock > b { font-size: 20px; }.hex-info-panel { display: block; }.hex-info-panel p + p { padding: 12px 0 0; border: 0; border-top: 1px solid rgba(147,169,193,.13); }.hex-board-shell { padding: 0; width: 100%; }.hex-turn-status { gap: 8px; }.hex-turn-status small { font-size: 8px; }.hex-turn-status strong { font-size: 10px; } }