:root {
      --cols: 24;
      --rows: 14;
      --cell: 28px;
      --panel: #bdbdbd00;
      --panel-dark: #808080;
      --panel-light: #f4f4f4;
      --unopened: rgba(201,201,201,0.70);
      --opened: rgba(236,236,236,0.60);
      --text: #1a1a1a;
    }

    * { box-sizing: border-box; }

    html, body {
      margin: 0;
      min-height: 100%;
      background: #22222200;
      font-family: "Barlow", sans-serif;
      color: var(--text);
      -webkit-tap-highlight-color: transparent;
    }

    body {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 18px;
    }

    .app {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .window {
    background: #bddbf3;
    border-top: 0px solid var(--panel-light);
    border-left: 0px solid var(--panel-light);
    border-right: 0px solid var(--panel-dark);
    border-radius: 3px;
    border-bottom: 0px solid var(--panel-dark);
    padding: 10px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0);
}

    .topbar {
 
    display: grid;
    grid-template-columns: 88px 1fr 88px;
    align-items: center;
    gap: 10px;
    background: #a9a9a900;
    /* border: 1px solid #1b69bf; */
    /* border-left: 3px solid var(--panel-light); */
    /* border-right: 3px solid var(--panel-dark); */
    /* border-bottom: 3px solid var(--panel-dark); */
    padding: 8px 10px;
    margin-bottom: 10px;
 
    }

    .counter {
 
    background: #ffffff;
    color: #1b69bf;
    font-family: "barlow";
    font-size: 2.1rem;
    font-weight: 500;
    text-align: center;
    /* border-top: 2px solid #666; */
    /* border-left: 2px solid #666; */
    /* border-right: 2px solid #eee; */
    border: 1px solid #1b69bf;
    line-height: 1;
    border-radius: 3px;
    padding: 6px 5px 6px;
    letter-spacing: 2px;
    user-select: none;
 
    }

    .face {
width: 50px;
        height: 50px;
        border-radius: 2px;
      margin: 0 auto;
      cursor: pointer;
      background: #c9c9c9 center / cover no-repeat;
     border : 3px solid #edf0e1;
     /*  border-left: 3px solid var(--panel-light);
      border-right: 3px solid var(--panel-dark);
      border-bottom: 3px solid var(--panel-dark); */
      display: flex;
      align-items: center;
      justify-content: center;
      user-select: none;
      overflow: hidden;
      padding: 0;
      font-size: 2rem;
      line-height: 1;
      touch-action: manipulation;transition:all 0.1s ease;
    }

    .face.pressed,
    .face:active {
        /* border-top: 3px solid var(--panel-dark);
      border-left: 3px solid var(--panel-dark);
      border-right: 3px solid var(--panel-light);
      border-bottom: 3px solid var(--panel-light); */

 
 
      border : 0px solid #edf0e1;padding:3px;
    }

    .face.has-image {
      color: transparent;
      text-shadow: none;
    }

    .board-wrap {
      position: relative;
      width: calc(var(--cols) * var(--cell));
      height: calc(var(--rows) * var(--cell));
      background-image: url('./assets/hormuz-miny.png');
      background-size: cover;
      background-position: center;
      border : 1px solid #1B69BF;
      /*  border-left: 3px solid var(--panel-dark);
      border-right: 3px solid var(--panel-light);
      border-bottom: 3px solid var(--panel-light);*/
      overflow: hidden;
border-radius: 3px;
      touch-action: none;
    }

    #board {
      position: absolute;
      inset: 0;
      display: grid;
      grid-template-columns: repeat(var(--cols), var(--cell));
      grid-template-rows: repeat(var(--rows), var(--cell));
    }

    .cell {
      width: var(--cell);
      height: var(--cell);
      border-top: 2px solid rgba(255,255,255,0.9);
      border-left: 2px solid rgba(255,255,255,0.9);
      border-right: 2px solid rgba(120,120,120,0.9);
      border-bottom: 2px solid rgba(120,120,120,0.9);
      background: var(--unopened);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 1.45rem;
      user-select: none;
      -webkit-user-select: none;
      cursor: pointer;
      text-shadow: 0 1px 0 rgba(255,255,255,0.35);
      padding: 0;
      line-height: 1;
      appearance: none;
      -webkit-appearance: none;
      border-radius: 0;
      outline: none;
      touch-action: none;
    }

    .cell.open {
      border: 1px solid rgba(110,110,110,0.55);
      background: var(--opened);
      cursor: default;
    }

    .cell.pressed-preview:not(.open):not(.flagged) {
      filter: brightness(0.96);
    }

    .cell.mine-hit { background: rgba(255, 96, 96, 0.75); }
    .cell.flagged { font-size: 1.15rem; }
    .cell.mine { font-size: 1.1rem; }

    .n1 { color: #1b43ff; }
    .n2 { color: #167d1c; }
    .n3 { color: #d31f1f; }
    .n4 { color: #122079; }
    .n5 { color: #7d1a1a; }
    .n6 { color: #108286; }
    .n7 { color: #111; }
    .n8 { color: #666; }

    .legend {
 
    margin-top: 8px;
    font-size: 0.9rem;
    color: #1b69bf;
    text-align: center;
    max-width: 900px;
 
    }

    .config-note {
      margin-top: 10px;
      font-size: 0.8rem;
      color: #cfcfcf;
      text-align: center;
      opacity: 0.85;
    }

    @media (max-width: 840px) {
      :root { --cell: min(4.1vw, 26px); }
      .counter { font-size: 1.7rem; }
      .face { width: 50px;
        height: 50px;
        border-radius: 2px;
font-size: 1.7rem; }
    }

    @media (max-width: 700px) {
      :root {
        --cols: 9;
        --rows: 13;
        --cell: min(9.5vw, 34px);
      }

      body { padding: 12px; }

      .board-wrap {
        width: 92vw;
        max-width: 420px;
        height: calc(var(--rows) * var(--cell));
        background-image: url('./assets/hormuz-miny.png');
        background-size: cover;
        background-position: center;
      }

      .topbar {
        grid-template-columns: 70px 1fr 70px;
        gap: 8px;
        padding: 7px 8px;
      }

      .counter {
        font-size: 1.5rem;
        padding: 6px 2px 4px;
      }

      .face {
        width: 40px;
        height: 40px;
        font-size: 1.55rem;
      }

      .cell { font-size: 1.1rem; }
      .legend { font-size: 0.82rem; max-width: 92vw; }
      .config-note { max-width: 92vw; }
}
.mobil {display: none;}
 @media (max-width: 600px) { 

  .mobil {display: block;}
  .desktop {display: none;}

 }


 @media (max-width: 400px) {

      .board-wrap {
        width: 86vw;
         
      }

    .window {
   max-width:300px;
}

    }