/* Color Variables! */

/* learned about css varibles here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties */
:root{
    --bg: rgb(231, 227, 214);
    --card: #11172b;
    --text: #c12810;
    --text2: #2b2875;
    --muted: #6495ef;
    --accent: #ffeb7a;
    --accent-2: #ff9a6a;
    --danger: #ff6b6b;
    --success: #5ee1a9;
    --ring: #f1c063;
    --ring-strong: #e4ae49;
    --button1:  #9cd66a;
    --button2:  #e4ae49;
  }

  *{box-sizing:border-box}
  html,body{height:100%}

  body{
    margin:0; 
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
    color:var(--text); 
    background:var(--bg);
    display:grid; place-items:center; padding:20px;
  }

  .app{width:min(1100px, 100%); display:grid; gap:16px; grid-template-columns: 360px 1fr;}

  @media (max-width: 980px){.app{grid-template-columns:1fr}}

  .card{
    border:1px solid rgba(255,255,255,0.08); 
    border-radius:18px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    backdrop-filter: blur(6px);}

  .panel {
    padding:16px 18px}

  h1 {
    font-size: clamp(18px, 2vw, 22px); 
    margin:0 0 6px; 
    letter-spacing:.5px}

  #gameStatus {
    font-weight:600; 
    color:var(--muted); 
    margin-bottom:8px}

  .row {
    display:flex;
    gap:10px; 
    align-items:center; 
    flex-wrap:wrap}

  .spacer {
    flex:1}

  .switch {
    position:relative; 
    display:inline-flex; 
    align-items:center; 
    gap:10px}

  .switch input {
    position:absolute; 
    opacity:0;}

  .toggle {
    width:54px; 
    height:30px; 
    background:var(--button1); 
    border-radius:999px; 
    display:inline-block; 
    position:relative; 
    cursor:pointer; 
    transition:.25s}

  .toggle::after {
    content:""; 
    position:absolute; 
    top:3px; 
    left:3px; 
    width:24px; 
    height:24px; 
    background:white; 
    border-radius:50%; 
    transition:.25s}

  .switch input:checked + .toggle {
    background:#c12810}

  .switch input:checked + .toggle::after {
    left:27px}

  .mode-label {
    font-size:14px; 
    color:var(--muted)}

  .hud {
    display:grid; 
    gap:10px}

  .hud .stat {
    display:flex; 
    justify-content:space-between; 
    padding:10px 12px; 
    background:rgba(255,255,255,0.5); 
    border:1px solid rgba(255,255,255,0.06); 
    border-radius:12px}

  .hint {
    color:var(--muted); 
    font-size:13px; 
    line-height:1.35}

  .btn {
    appearance:none; 
    border:none; 
    background: var(--button1);
    color:white;
    padding:10px 14px;
    border-radius:12px; 
    font-weight:600; 
    letter-spacing:.2px; 
    }

  .btn.secondary {
    background: var(--button1);
    color:#054910; 
    box-shadow:none; 
    border:1px solid rgba(255,255,255,0.08)}

  .btn:active {
    transform:translateY(1px)}

  .grid-card {
    padding:14px}

  .svg-wrap { 
    position:relative; 
    width:100%; 
    -ratio:1/1;}

  svg {
    width:100%;
    height:100%; 
    display:block}

  .legend {
    display:flex; 
    gap:8px; 
    flex-wrap:wrap; 
    margin-top:10px; 
    font-size:13px; 
    color:var(--muted)}

  .dot{
    width:10px; 
    height:10px; 
    border-radius:50%}

  .dot.goal{
    background:var(--success)}

  .dot.foe{
    background:var(--danger)}

  .dot.creep {
    background:var(--accent-2)}

  .dot.unknown {
    background:#c7d3ff}

  .easy-only {
    display:contents}

  body.hard .easy-only {
    display:none }

  body.hard .legend .dot {
    background:#c7d3ff }

  body.hard .legend .label {
    opacity:.8}

  body.hard .stat[data-kind="coords"] {
    display: none;}

  .preview-grid {
    display:grid; 
    grid-template-columns: 1fr 1fr 1fr; 
    gap:8px }

  .win {
    color:var(--success)}

  .lose {
    color:var(--danger)}

    body.has-popup { overflow: hidden; }
  
  .popup {
    position:fixed; 
    inset:0; 
    background:rgba(0,0,0,.55); 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    z-index:50}

  .popup.hidden {
    display:none}

  .popup-card {
    background: rgba(255, 183, 48, 0.8);
    border:1px solid rgba(255,255,255,.1); 
    border-radius:16px; 
    padding:18px 20px; 
    width:min(480px, 92%);
    color:var(--text); 
    box-shadow:0 20px 50px rgba(0,0,0,.45)}

  .popup-card h2 {
    margin:0 0 8px; 
    font-size:20px}

  .popup-card p {
    margin:0 0 12px; 
    color:var(--text2)}