:root {
      --ball-size: clamp(28px, 10vw, 40px);
      --ball-font: clamp(12px, 4vw, 18px);
    }

    body {
      font-family: sans-serif;
      background: #f5f5f5;
      
		/*padding: 10px;*/

      margin: 0;
      text-align: center;
    }

    h1 {
	  margin-top: 0px;
      font-size: 1.5em;
            margin-bottom: -15px;
	    display: block;
    font-size: 1.5em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    unicode-bidi: isolate;

    }
h2{margin-top: 18px;		margin-bottom: 18px;
    font-size: 18px;
    font-weight: 400;
}
#note{padding: 10px;}
    .controls { /*如果你想要更穩定、手機畫面不跑版，可以在 .controls 中加上最大寬度限制u*/
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
      margin-bottom: 16px;
      flex-wrap: wrap;
      max-width: 500px;
      margin-left: auto;
      margin-right: auto;

    }

    select, button {
      padding: 8px 12px;
      font-size: 16px;
      margin: 0 6px;
      border-radius: 6px;
      border: none;
    }

    button {
      background: #3498db;
      color: white;
      cursor: pointer;
      box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    }
	  .sl638_icon {
		  transform: scale(1);
    width: 150px;
    height: 60px;
    content: url(https://www.lottery.com.tw/img/sl638.gif);
               margin-bottom: -12px;
}
    p{font-size: 18px;font-weight: 400;}
    #container {
      display: flex;
      flex-direction: column;
      gap: 8px;
      max-width: 100%;
    }

    .row {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding: 0 5px;
      margin: 0 auto;
      max-width: 500px;
      box-sizing: border-box;
    }
.row>* {
    width: auto;
}
.group-number {
 /*  width: 2.2em; */
  width: 1.5em; 
/*  text-align: right; 
  
  margin-right: 6px;*/
  font-weight: bold;
  flex-shrink: 0;
}

.group {
  display: flex;
  gap: 4px;
  /* overflow-x: auto; */
  flex-wrap: nowrap;
  flex-shrink: 1;
  max-width: 100%;  /* 保證不超出容器 */
}
	  
    .ball {
      width: var(--ball-size);
      height: var(--ball-size);
      border-radius: 50%;
      line-height: var(--ball-size);
      text-align: center;
      font-weight: bold;
      font-size: var(--ball-font);
      transform: scale(0);
      animation: popIn 0.5s ease-out forwards;
      flex-shrink: 0;
    }

    .red {
      background: #f1c40f;
      color: #000000;
    }

    .blue {
      background: #e74c3c;
      color: #ffffff;
    }

    @keyframes popIn {
      0% { transform: scale(0); opacity: 0; }
      60% { transform: scale(1.2); opacity: 1; }
      100% { transform: scale(1); }
    }


    #note {
      margin-top: 16px;
      font-size: 14px;
      color: #a33;
      max-width: 500px;
      margin-left: auto;
      margin-right: auto;
      text-align: left;
      line-height: 1.5;
    }