/* Hex Conquest — Async Territory Strategy */

.hero-back-link{display:inline-block;margin-bottom:.5rem;color:var(--muted);text-decoration:none;font-size:1.1rem}
.hero-back-link:hover{color:var(--ink)}
.hero-copy-wrap{display:flex;flex-direction:column}

/* Lobby */
.lobby-panel{padding:1.5rem}
.lobby-panel h2{margin:0 0 .3rem;font-size:1.5rem}
.lobby-desc{margin:0 0 1.2rem;color:var(--muted);line-height:1.5;max-width:38rem}
.lobby-actions{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;margin-bottom:1rem}
.join-row{display:flex;gap:.4rem}
.join-input{width:8rem;padding:.55rem .7rem;border:2px solid var(--line-strong);border-radius:var(--radius);background:rgba(255,255,255,.04);font:inherit;font-family:var(--mono);font-size:.95rem;color:var(--ink);text-transform:uppercase;letter-spacing:.1em;text-align:center}
.join-input:focus{border-color:var(--accent);outline:none}
.my-games h3{margin:0 0 .5rem;font-size:.9rem;color:var(--muted)}
.mg-row{display:grid;grid-template-columns:1fr auto auto;gap:.5rem;align-items:center;padding:.5rem .4rem;border-bottom:1px solid var(--line)}
.mg-row:last-child{border-bottom:none}
.mg-info{font-size:.85rem;font-family:var(--mono)}
.mg-status{font-family:var(--mono);font-size:.72rem;padding:.2rem .5rem;border-radius:999px;background:rgba(255,255,255,.05);color:var(--muted)}
.mg-status.playing{color:var(--accent);background:rgba(199,210,254,.1)}
.mg-open{font-size:.8rem}

/* Game layout */
.hex-layout{display:grid;grid-template-columns:1fr 280px;gap:.8rem;padding:.8rem}
.hex-main{display:flex;flex-direction:column;gap:.5rem;min-width:0}
.hex-sidebar{display:flex;flex-direction:column;gap:.6rem;min-width:0}

/* Info bar */
.hex-info-bar{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;padding:.5rem .7rem;border:2px solid var(--line);border-radius:var(--radius);background:rgba(255,255,255,.02);font-family:var(--mono);font-size:.78rem;color:var(--muted)}
.hex-info-bar strong{color:var(--ink)}
.hx-status{margin-left:auto;color:var(--accent);font-weight:600}

/* Canvas */
.hex-canvas-wrap{position:relative;border:2px solid rgba(255,255,255,.08);border-radius:var(--radius);overflow:hidden;background:#0c0d10}
.hex-canvas-wrap canvas{display:block;width:100%;height:500px;outline:none;cursor:grab}
.hex-canvas-wrap canvas:active{cursor:grabbing}

/* Orders panel */
.orders-panel{padding:.7rem;border:2px solid var(--line);border-radius:var(--radius);background:rgba(255,255,255,.02)}
.orders-panel h3{margin:0 0 .4rem;font-size:.85rem;color:var(--muted)}
.order-row{display:flex;justify-content:space-between;align-items:center;padding:.3rem .4rem;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.75rem}
.order-row:last-child{border-bottom:none}
.order-remove{font-size:.7rem!important;min-height:1.5rem!important;padding:.15rem .4rem!important;color:var(--danger)!important}
.orders-actions{margin-top:.5rem}
.orders-actions button{width:100%}

/* Combat log */
.hex-log-panel{padding:.7rem;border:2px solid var(--line);border-radius:var(--radius);background:rgba(0,0,0,.2)}
.hex-log-panel h3{margin:0 0 .4rem;font-size:.85rem;color:var(--muted)}
.hex-combat-log{max-height:180px;overflow-y:auto;font-family:var(--mono);font-size:.7rem;line-height:1.5;color:var(--muted)}
.hex-combat-log p{margin:0;padding:.1rem 0;border-bottom:1px solid rgba(255,255,255,.04)}
.hex-combat-log p:last-child{border-bottom:none}

@media(max-width:720px){
  .hex-layout{grid-template-columns:1fr}
  .hex-sidebar{order:2}
  .hex-canvas-wrap canvas{height:350px}
}