/** golf css **/

:root {
      --bg: #f6f5f0;
      --fg: #222;
      --btntext:  #f6f5f0;
      --card: #080808;
      --startbtn: #163a78;
      --button: #156823;
      --btnhover: #1d8c30;
      --line: #ffffff;
      --acc: #d3e111;
      --warn: #26ff00;
      --bd: #f7e89a; 
      --cnvbg: #098707;
      --bgUrl: url('//projektika.org/gamesImg/golf/trawniks_small.webp');
      box-sizing: border-box;
      padding-top: env(safe-area-inset-top, 0px);
      padding-bottom: env(safe-area-inset-bottom, 0px)
    }
/*
    @media (prefers-color-scheme:dark) {
      :root:not([data-theme="light"]) {
        --bg: #1c1d20;
        --fg: #eee;
        --card: #26282c;
        --warn: #f0a050;
        --bd: #3a3d44
      }
    }

    :root[data-theme="dark"] {
      --bg: #1c1d20;
      --fg: #eee;
      --card: #26282c;
      --warn: #f0a050;
      --bd: #3a3d44
    }
*/
    * {
      box-sizing: border-box
    }

    html,
    body {
      margin: 0;
      background: var(--bg);
      color: var(--fg);
      font: 15px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif
    }

    main {
      max-width: 1160px;
      margin: 0 auto;
      padding: 0px
    }

    .panel {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 8px 16px;
      margin-bottom: 10px
    }

    label {
      display: block;
      font-size: 13px;
    }

    input[type=range] {
      width: 100%
    }

.cnvsCotainer{
      display: flex;
      flex-wrap: wrap;
      gap: 2px;
      margin: auto;
      align-items: center;
      justify-content: center;
}
    .btns {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 10px 0;
      align-items: center;
      justify-content: center;
    }

    button,
    .file {
      font: inherit;
      padding: 7px 12px;
      border-radius: 8px;
      border: 1px solid var(--bd);
      background: var(--button);
      color: var(--btntext);
      cursor: pointer
    }

    button.main1 {
      background: var(--startbtn);
      color: #fff;
      border-color: var(--acc)
    }

    button:hover{
         background: var(--btnhover);

    }
    .file input {
      display: none
    }

    canvas {
      width: 100%;
      max-width: 1200px;
      height: auto;
      display: block;
      /*background: var(--card);*/ 
      background: rgba(0, 0, 0, 0.2);
      background-image: var(--bgUrl);
      background-size: 100% 100%;
     
      border: 1px solid var(--bd);
      border-radius: 10px;
      touch-action: manipulation
    }

    #info {
      font-size: 14px;
      /*margin-left: auto*/
    }

    .header-title {
    font-size: 2.2rem;
    color: rgb(18, 55, 21);
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

@media (max-width: 700px) {
    .header-title {
        font-size: 1.2rem;
        margin-bottom: 0.5rem !important;
    }
}
@media (max-height: 500px) {
    .header-title {
        font-size: 1.2rem;
        margin-bottom: 0.5rem !important;
    }
}


/*****************dialog detale *******************/
/* Stylizacja samego okna */
dialog {
  border: none;
  position: relative;
  border-radius: 8px;
  background-color: #eaeaea;
  width: 90%;
  max-width: 500px;
  opacity: 0;
  z-index: 1000;
  transform: scale(0.85);
  transition: opacity 0.3s ease, transform 0.3s ease, display 0.3s ease allow-discrete;
}

dialog .handi{
    position: absolute;
    right: 15%;
    top: 25%;
    font-size: 2rem;
    font-weight: 700;
    color: #104302;
    display: block;

}

dialog h2{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color:#104302;
}

dialog::backdrop {
  background-color: rgba(1, 28, 3, 0.5);
  /*backdrop-filter: blur(3px);*/
}

dialog:open {
  opacity: 1;
  transform: scale(1);
}

@starting-style {
  dialog:open {
    opacity: 0;
    transform: scale(0.85);
  }
}


/************** SVG ****************/
.anim-svg :is(path, line, polyline, polygon, circle, ellipse, rect) {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);   /* stan wyjściowy: niewidoczne */
}
.anim-svg.is-drawing :is(path, line, polyline, polygon, circle, ellipse, rect) {
  animation: draw var(--dur) linear var(--delay) forwards;
}
@keyframes draw {
  to { stroke-dashoffset: 0; }
}

.my-svg {
    display: none;
    width: 100%;
    height: auto;
}

.my-svg.active {
    display: block;
}

.svg-container {
    width: 100%;
    max-width: 500px;
}

article p,
article li
{
    font-size: 1.3rem;
}