#topBar {
   display: inline-block;
   margin: 10px 0 0 10px;
 }

 .icon-row {
   display: flex;
   background: #000;
   border-radius: 10px;
   overflow: hidden;
   width: fit-content;
 }

 .icon-btn {
   background: none;
   border: none;
   outline: none;
   color: #fff;
   font-size: 2em;
   width: 54px;
   height: 54px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   border-right: 2px solid #fff;
   padding: 0;
   margin: 0 auto 0px;
 }

 .icon-btn:last-child {
   border-right: none;
 }

 .icon-btn:active {
   background: #222;
 }

 .names-count {
   color: #000;
   font-size: 1.3em;
   font-weight: bold;
   margin: 4px 0 0 10px;
   text-align: left;
 }

 .icon-gear::before {
   content: "⚙️";
   font-family: inherit;
 }

 .icon-music::before {
   content: "🎵";
   font-family: inherit;
 }

 .icon-trophy::before {
   content: "🏆";
   font-family: inherit;
 }

 #main-container {
   width: 1100px;
   margin: 0px auto 0 auto;
   position: relative;
   background: none;
   box-shadow: none;
   /* border: 1px solid #bbb6b6 !important; */
   padding: 10px 0 20px;
 }

 #craneCanvas {
   border-radius: 0 !important;
 }

 #gameArea {
   position: relative;
   width: 1100px;
   overflow: hidden;
   background: none;
   border-radius: 0;
 }

 #craneCanvas {
   width: 1100px;
   display: block;
   background: none;
 }

 #winnerDisplay {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   font-size: 2.2rem;
   color: #333;
   text-align: center;
   pointer-events: none;
   z-index: 5;
   font-weight: 400;
   text-shadow: 0 2px 8px #fff, 0 0 2px #000;
   top: 40%;
   min-width: 200px;
   transition: opacity 0.3s;
 }

 #customGameButtons {
   position: absolute;
   right: 30px;
   bottom: 30px;
   z-index: 20;
   display: none;
   flex-direction: column;
   align-items: center;
 }

 #removeBox {
   background: #fff;
   border-radius: 16px;
   box-shadow: 0 2px 12px #0002;
   padding: 18px 24px 12px 24px;
   min-width: 220px;
   border: 2px solid #222;
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-bottom: 10px;
 }

 #removeBoxRow {
   display: flex;
   align-items: center;
   font-size: 1.25rem;
   font-weight: bold;
   margin-bottom: 10px;
   gap: 8px;
 }

 #removeIcon {
   font-size: 2rem;
   color: #2ecc40;
   border-radius: 50%;
   border: 2px solid #2ecc40;
   background: #fff;
   margin-right: 6px;
   width: 32px;
   height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: color 0.2s, border 0.2s;
 }

 #removeIcon.false {
   color: #e74c3c;
   border-color: #e74c3c;
 }

 #removeBoxDivider {
   width: 100%;
   height: 2px;
   background: #eee;
   margin: 8px 0 8px 0;
 }

 #continueBtn {
   font-size: 1.3rem;
   padding: 10px 0;
   width: 100%;
   border-radius: 10px;
   border: none;
   background: #19c419;
   color: #fff;
   cursor: pointer;
   font-weight: bold;
   box-shadow: 0 2px 6px #0002;
   margin-top: 6px;
   transition: background 0.2s;
 }

 #continueBtn:hover {
   background: #13a113;
 }

 #gameButtons {
   position: absolute;
   bottom: 30px;
   right: 30px;
   z-index: 10;
 }

 /* Settings Popup */
 #settingsPopup {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.4);
   z-index: 999;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 #settingsContent {
   background: #fff;
   border: 3px solid #222;
   border-radius: 18px;
   min-width: 650px;
   max-width: 100vw;
   box-shadow: 0 8px 32px #0004;
   padding: 0;
   overflow: hidden;
   margin-top: 20px;
   z-index: 9999;
   height: auto;
 }

 .popup-tabs {
   display: flex;
   border-bottom: 3px solid #222;
   background: #fff;
   border-radius: 18px 18px 0 0;
   overflow: hidden;
 }

 .tabBtn {
   flex: 1;
   padding: 14px 0 10px 0;
   border: none;
   border-right: 3px solid #222;
   background: #fff;
   font-weight: bold;
   font-size: 1.25em;
   color: #222;
   cursor: pointer;
   outline: none;
   transition: background 0.2s;
 }

 .tabBtn:last-child {
   border-right: none;
 }

 .tabBtn.active {
   background: #e6e6e6;
 }

 .popup-inner {
   padding: 24px 24px 18px 24px;
   background: #fff;
   border-radius: 0 0 18px 18px;
   box-shadow: 0 2px 8px #0001 inset;
 }

 .popup-label {
   font-size: 1.1em;
   margin-bottom: 8px;
   color: #222;
 }

 .popup-textarea {
   width: 100%;
   min-height: 270px;
   max-height: 270px;
   font-size: 1.1em;
   border: 2px solid #222;
   border-radius: 8px;
   padding: 8px;
   resize: vertical;
   box-sizing: border-box;
   margin-bottom: 18px;
   background: #fafafa;
   font-family: inherit;
 }

 .popup-save-btn {
   width: 100%;
   background: #4caf50;
   color: #fff;
   font-size: 1.2em;
   border: 2px solid #222;
   border-radius: 8px;
   padding: 12px 0;
   cursor: pointer;
   font-weight: bold;
   box-shadow: 0 2px 8px #0002;
   margin-top: 6px;
   transition: background 0.2s;
 }

 .popup-save-btn:hover {
   background: #388e3c;
 }

 .tabContent {
   display: none;
 }

 .tabContent[style*="display: block"] {
   display: block;
 }

 /* Remove/Continue Button Box */
 #gameButtons {
   position: absolute;
   bottom: 30px;
   right: 30px;
   z-index: 10;
 }

 #removeContinueBox {
   display: flex;
   flex-direction: column;
   align-items: center;
   background: #fff;
   border: 2px solid #bbb;
   border-radius: 10px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
   padding: 12px 18px 18px 18px;
   margin-bottom: 18px;
   min-width: 180px;
 }

 .removeRow {
   display: flex;
   align-items: center;
   font-size: 1.25rem;
   font-weight: 600;
   color: #1a8f3c;
   background: #eafbe7;
   border-radius: 7px;
   padding: 7px 14px;
   margin-bottom: 12px;
   cursor: pointer;
   transition: background 0.2s;
   border: 1.5px solid #b2e5c2;
 }

 .removeRow:hover {
   background: #d2f5d2;
 }

 .removeIcon {
   font-size: 2rem;
   margin-right: 10px;
   color: #1a8f3c;
 }

 .continueBtn {
   background: #19c037;
   color: #fff;
   font-size: 1.3rem;
   font-weight: bold;
   border: none;
   border-radius: 8px;
   padding: 10px 32px;
   cursor: pointer;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
   transition: background 0.2s;
 }

 .continueBtn:hover {
   background: #148c2a;
 }

 .top-row {
   margin-top: 10px;
   display: flex;
   align-items: center;
 }


 .canvas-top-row-wrapper {
   position: absolute;
   top: -2px;
   left: 60px;
   z-index: 2;
   pointer-events: auto;
 }

 #gameArea {
   position: relative;
 }

 /* Popup Overlay */
 .custom-popup {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 2000;
   display: flex;
   align-items: center;
   justify-content: center;
   background: rgba(0, 0, 0, 0.35);
   backdrop-filter: blur(6px);
 }

 /* Popup Card */
 .custom-popup-card {
   position: relative;
   background: #fff;
   border-radius: 18px;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
   padding: 38px 44px 32px 44px;
   min-width: 340px;
   max-width: 95vw;
   min-height: 260px;
   display: flex;
   flex-direction: column;
   align-items: center;
   overflow: visible;
   justify-content: center;
   margin: auto;
 }

 /* Close (X) Button */
 .custom-popup-close {
   position: absolute;
   top: 18px;
   right: 22px;
   font-size: 1.6rem;
   color: #bbb;
   cursor: pointer;
   transition: color 0.2s;
   z-index: 2;
 }

 .custom-popup-close:hover {
   color: #e74c3c;
 }

 /* Green Check Circle */
 .custom-popup-check {
   position: absolute;
   top: -38px;
   left: 50%;
   transform: translateX(-50%);
   background: #19c037;
   width: 64px;
   height: 64px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 2px 8px rgba(25, 192, 55, 0.18);
   border: 4px solid #fff;
 }

 .custom-popup-check span {
   color: #fff;
   font-size: 2.5rem;
   font-weight: bold;
 }

 /* Title */
 .custom-popup-title {
   margin-top: 38px;
   margin-bottom: 10px;
   font-size: 2rem;
   color: #222;
   font-weight: 700;
   text-align: center;
 }

 /* Message */
 .custom-popup-message {
   font-size: 1.15rem;
   color: #444;
   margin-bottom: 28px;
   text-align: center;
 }

 /* Button */
 .custom-popup-btn {
   background: #19c037;
   color: #fff;
   font-size: 1.15rem;
   font-weight: bold;
   border: none;
   border-radius: 8px;
   padding: 12px 38px;
   cursor: pointer;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
   transition: background 0.2s;
   margin-bottom: 8px;
 }

 .custom-popup-btn:hover {
   background: #148c2a;
 }

 /* Green Accent at Bottom */
 .custom-popup-accent {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   height: 12px;
   background: #19c037;
   border-radius: 0 0 18px 18px;
 }

 #removeBtn {
   display: flex;
   align-items: center;
   gap: 10px;
   color: #fff;
   background: linear-gradient(0deg, rgb(20 167 62) 0%, rgb(102 247 113) 100%);
   border: none;
   box-shadow: 0 .7em 1.5em -.5em #14a73e98;
   border-radius: 100px;
   font-size: 1.18rem;
   font-weight: 600;
   padding: 10px 28px 10px 20px;
   cursor: pointer;
   outline: none;
 }

 #numbersTab {
   display: none;
 }

 #removeBtn.false {
   background: linear-gradient(0deg, #e74c3c 0%, #ffb3b3 100%);
   color: #fff;
 }

 #removeIcon.false {
   color: #e74c3c;
   border-color: #e74c3c;
 }

 #removeBtn.true {
   background: linear-gradient(0deg, rgb(20 167 62) 0%, rgb(102 247 113) 100%);
   color: #fff;
 }

 #removeIcon.true {
   color: #2ecc40;
   border-color: #2ecc40;
 }

 #gameButtons {
   position: absolute;
   bottom: 30px;
   right: 30px;
   z-index: 10;
   display: flex;
   flex-direction: column;
   align-items: center;
   background: #fff;
   border-radius: 18px;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
   padding: 28px 32px 24px 32px;
   gap: 18px;
   min-width: 260px;
 }

 #removeBtn {
   margin-bottom: 0;
   width: 100%;
   font-size: 1.18rem;
   font-weight: 600;
   border-radius: 100px;
   border: none;
   box-shadow: 0 .7em 1.5em -.5em #14a73e98;
   transition: background 0.2s, color 0.2s;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 #continueBtn {
   width: 100%;
   background: linear-gradient(90deg, #4f8cff 0%, #38e6ff 100%);
   color: #fff;
   font-size: 1.22rem;
   font-weight: bold;
   border: none;
   border-radius: 100px;
   padding: 12px 0 12px 0;
   cursor: pointer;
   box-shadow: 0 4px 18px rgba(79, 140, 255, 0.18);
   margin-top: 0;
   transition: background 0.2s, box-shadow 0.2s;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 #continueBtn:hover {
   background: linear-gradient(90deg, #3576e0 0%, #1fd1f9 100%);
   box-shadow: 0 6px 24px rgba(79, 140, 255, 0.28);
 }

/* Tablet Responsive Design */
@media (min-width: 769px) and (max-width: 1024px) {
  #main-container {
    width: 95%;
    max-width: 900px;
    margin: 0 auto;
  }

  #gameArea {
    width: 100%;
  }

  #craneCanvas {
    width: 100% !important;
    height: auto;
  }

  .canvas-top-row-wrapper {
    left: 20px;
    right: 20px;
  }

  .top-row {
    padding: 10px 15px;
    border-radius: 10px;
    backdrop-filter: blur(10px);
  }

  #winnerDisplay {
    font-size: 1.8rem;
    top: 35%;
    display: none;
  }

  #gameButtons {
    bottom: 25px;
    right: 25px;
    min-width: 240px;
  }
}
 /* Mobile Responsive Design */
@media (max-width: 768px) {
  #main-container {
    width: 100%;
    max-width: 100vw;
    margin: 0;
    padding: 5px;
    box-sizing: border-box;
  }

  #gameArea {
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
    position: relative;
  }

  #craneCanvas {
    width: 100% !important;
    max-width: 100vw;
    height: auto;
    display: block;
    border-radius: 8px;
  }

  .canvas-top-row-wrapper {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    z-index: 2;
    pointer-events: auto;
  }

  .top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 8px;
  }

  .icon-row {
    display: flex;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    width: fit-content;
  }

  .icon-btn {
    width: 44px;
    height: 44px;
    font-size: 1.5em;
  }

  .names-count {
    display: none;
    font-size: 1rem;
    font-weight: bold;
    color: #333;
    margin: 0;
  }

  #winnerDisplay {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.5rem;
    color: #333;
    text-align: center;
    pointer-events: none;
    z-index: 5;
    font-weight: 600;
    text-shadow: 0 2px 8px #fff, 0 0 2px #000;
    top: 30%;
    min-width: 150px;
    max-width: 90vw;
    padding: 10px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    backdrop-filter: blur(10px);
  }

  #gameButtons {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    padding: 20px;
    gap: 12px;
    min-width: 280px;
    max-width: 90vw;
  }

  #removeBtn {
    width: 100%;
    font-size: 1rem;
    padding: 12px 20px;
    border-radius: 50px;
  }

  #continueBtn {
    width: 100%;
    font-size: 1.1rem;
    padding: 12px 20px;
    border-radius: 50px;
  }

  /* Settings Popup Mobile */
  #settingsPopup {
    padding: 10px;
    z-index: 9999;
  }

  #settingsContent {
    min-width: 90vw;
    max-width: 90vw;
    margin: 10px;
    border-radius: 12px;
    z-index: 9999;
  }

  .popup-tabs {
    border-radius: 12px 12px 0 0;
  }

  .tabBtn {
    padding: 12px 0 8px 0;
    font-size: 1.1em;
  }

  .popup-inner {
    padding: 20px;
  }

  .popup-textarea {
    min-height: 200px;
    max-height: 200px;
    font-size: 1em;
  }

  .popup-save-btn {
    font-size: 1.1em;
    padding: 12px 0;
  }

  /* Custom Popup Mobile */
  .custom-popup-card {
    min-width: 90vw;
    max-width: 90vw;
    padding: 30px 20px 25px 20px;
    min-height: 200px;
    border-radius: 12px;
  }

  .custom-popup-title {
    font-size: 1.5rem;
    margin-top: 30px;
  }

  .custom-popup-message {
    font-size: 1rem;
    margin-bottom: 20px;
  }

  .custom-popup-btn {
    font-size: 1rem;
    padding: 12px 30px;
  }

  .custom-popup-check {
    width: 50px;
    height: 50px;
    top: -25px;
  }

  .custom-popup-check span {
    font-size: 2rem;
  }

  .custom-popup-close {
    top: 15px;
    right: 15px;
    font-size: 1.4rem;
  }
}

/* Small Mobile Devices */
@media (max-width: 480px) {
  #main-container {
    padding: 3px;
  }

  .canvas-top-row-wrapper {
    top: 5px;
    left: 5px;
    right: 5px;
  }

  .top-row {
    padding: 6px 10px;
  }

  .icon-btn {
    width: 40px;
    height: 40px;
    font-size: 1.3em;
  }

  .names-count {
   display: none;
  }

  #winnerDisplay {
    font-size: 1.3rem;
    top: 25%;
    padding: 8px;
    display: none;
  }

  #gameButtons {
    bottom: 47%;
    padding: 15px;
    min-width: 260px;
  }

  #removeBtn {
    font-size: 0.95rem;
    padding: 10px 16px;
  }

  #continueBtn {
    font-size: 1rem;
    padding: 10px 16px;
  }

  #settingsContent {
    min-width: 95vw;
    max-width: 95vw;
    margin: 5px;
    z-index: 9999;
  }

  .popup-inner {
    padding: 15px;
  }

  .popup-textarea {
    min-height: 180px;
    max-height: 180px;
  }

  .custom-popup-card {
    min-width: 95vw;
    max-width: 95vw;
    padding: 25px 15px 20px 15px;
  }
}

/* Landscape Mobile */
@media (max-width: 768px) and (orientation: landscape) {
  #main-container {
    padding: 5px;
  }

  #craneCanvas {
    max-height: 70vh;
  }

  .canvas-top-row-wrapper {
    top: 5px;
  }

  #winnerDisplay {
    top: 20%;
    font-size: 1.3rem;
  }

  #gameButtons {
    bottom: 10px;
    padding: 15px;
    min-width: 240px;
  }

  #settingsContent {
    max-height: 80vh;
    overflow-y: auto;
    z-index: 9999;
  }

  .popup-textarea {
    min-height: 150px;
    max-height: 150px;
  }
}

/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {
  .icon-btn {
    min-height: 44px;
    min-width: 44px;
  }

  #removeBtn,
  #continueBtn {
    min-height: 44px;
  }

  .tabBtn {
    min-height: 44px;
  }

  .popup-save-btn {
    min-height: 44px;
  }

  .custom-popup-btn {
    min-height: 44px;
  }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  #craneCanvas {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}