* { 
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  padding: 20px;
  background-color: #1e2124; 
  color: #b0b8c0; 
  font-family: 'Roboto Condensed', sans-serif; 
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 16px; 
}

h1 { 
  font-family: 'Oswald', sans-serif; 
  font-size: 2.8em; 
  margin-bottom: 15px; 
  color: #c5b391; 
  text-shadow: 1px 1px 3px #000; 
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.controls-top {
  margin-bottom: 25px;
}

button {
  font-family: 'Oswald', sans-serif; 
  font-weight: 500;
  text-transform: uppercase;
  color: #c8d0d8; 
  background-color: #31363b; 
  border-style: solid;
  border-width: 1px;
  border-color: #4a5056 #2a2d31 #2a2d31 #4a5056; 
  padding: 10px 20px; 
  margin: 8px 0; 
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 1px 2px rgba(0,0,0,0.3);
  border-radius: 0; 
  width: 100%; 
  font-size: 1.05em; 
  letter-spacing: 0.5px;
}

button:hover {
  background-color: #3c4248; 
  color: #fff;
  border-color: #5a6066 #303337 #303337 #5a6066;
}

button:active {
  background-color: #2a2d31; 
  border-color: #202326 #3a3d41 #3a3d41 #202326;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.5); 
  transform: translateY(1px); 
}

button:disabled { 
    background-color: #2c2f33 !important;
    color: #6a7078 !important;
    cursor: not-allowed !important;
    border-color: #222528 !important;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.2) !important;
}

#resetAllBtn { 
  background-color: #5a3e3a; 
  border-color: #7a5e5a #3a1e1a #3a1e1a #7a5e5a;
  color: #d8c8c0;
}
#resetAllBtn:hover {
  background-color: #6a4e4a;
  border-color: #8a6e6a #4a2e2a #4a2e2a #8a6e6a;
  color: #fff;
}
#resetAllBtn:active {
  background-color: #4a2e2a;
  border-color: #3a1e1a #5a3e3a #5a3e3a #3a1e1a;
}

.options-panel {
    background-color: #2c2f33;
    padding: 10px 15px;
    border-radius: 0;
    border: 1px solid #454a4f;
    margin-bottom: 20px;
    display: inline-block; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
.options-panel label {
    cursor: pointer;
    font-size: 0.9em;
    color: #b0b8c0;
}
.options-panel input[type="checkbox"] {
    margin-right: 8px;
    vertical-align: middle;
    width: auto; 
}


.last-picked-display {
    margin-bottom: 25px; 
    padding: 10px 15px;
    background-color: #25282b; 
    border: 1px solid #3a3d41; 
    border-radius: 0;
    text-align: center;
    width: 90%;
    max-width: 700px; 
    color: #889098; 
    font-size: 0.9em;
    box-shadow: inset 0 0 8px rgba(0,0,0,0.4);
}
#lastPickedPlayer, #lastPickedCountry {
    font-weight: 700; 
    color: #c5b391; 
    margin: 0 5px;
}


.flex {
  display: flex; flex-wrap: wrap; gap: 25px; 
  justify-content: center; width: 100%;
}

.box {
  background: #2c2f33; 
  border-style: solid;
  border-width: 1px;
  border-color: #454a4f #1f2225 #1f2225 #454a4f; 
  border-radius:0; 
  width:330px; 
  padding: 20px; 
  box-shadow: 0 5px 15px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.03); 
  display:flex; flex-direction:column; align-items:center;
}

h2 { 
  font-family: 'Oswald', sans-serif;
  font-size: 1.9em; 
  margin: 10px 0 12px; 
  color:#c5b391; 
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
h3 { 
  font-family: 'Oswald', sans-serif;
  font-size: 1.4em; 
  margin: 20px 0 10px; 
  color:#a0a8b0; 
  font-weight: 400; 
  border-bottom: 1px solid #3a3d41;
  width: 100%;
  text-align: center;
  padding-bottom: 8px;
  text-transform: uppercase;
  position: relative; /* Szükséges a .grid-zoom-btn abszolút pozicionálásához */
}

.count-display {
    font-size: 0.7em; 
    color: #778088; 
    font-weight: normal;
    margin-left: 10px;
    vertical-align: middle;
}


input { 
  width:100%; margin:5px 0 12px 0; padding:10px; 
  border-radius:0; 
  border: 1px solid #222528;
  background-color: #1e2124;
  color: #b0b8c0;
  font-size:1em; 
  font-family: 'Roboto Condensed', sans-serif;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}
input::placeholder {
  color: #555c63;
}


ul#playersList, ul#countriesList { 
  list-style:none; padding: 0; margin:10px 0;
  width:100%; 
  max-height: 220px; 
  overflow-y:auto;
  background: #25282b; 
  border: 1px solid #3a3d41;
  border-radius: 0;
  padding: 8px; 
}
ul#playersList li, ul#countriesList li { 
  background:#31363b; padding:8px 10px; margin:5px 0;
  border-radius:0; color:#a0a8b0; font-weight:normal; 
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.95em; 
  border-left: 3px solid #7a6448; 
}
ul#playersList li:hover, ul#countriesList li:hover {
    background-color: #3c4248;
}


.player-actions button, .country-actions button { 
    background: none !important; /* Felülírja az általános gomb stílust */
    border: none !important;
    color: #889098 !important; 
    cursor: pointer;
    padding: 2px 5px !important;
    font-size: 1.1rem !important; 
    margin-left: 8px !important; 
    width: auto !important; 
    line-height: 1 !important; 
    transition: color 0.2s;
    text-transform: none !important; /* Ne legyen nagybetűs */
    font-weight: normal !important; /* Ne legyen vastag */
    box-shadow: none !important; /* Ne legyen árnyéka */
}
.player-actions button:hover, .country-actions button:hover { 
    color: #c5b391 !important;
    background: none !important;
}
.player-actions button:active, .country-actions button:active {
    transform: scale(0.9) !important; /* Kisebb benyomódás */
    background: none !important;
}


.wheel-container {
  position:relative; width:250px; height:250px; margin:15px 0;
  border-radius:50%;
  border: 5px solid #25282b;
  background-color: #111314;
  box-shadow: 0 0 10px rgba(0,0,0,0.7), inset 0 0 8px rgba(0,0,0,0.5);
  box-sizing: content-box; /* ensure canvas fits inside the border */
}
canvas {
  border-radius:50%; transform-origin:50% 50%;
}

.pointer {
  position: absolute;
  top: 50%; 
  right: -22px; 
  transform: translateY(-50%);
  font-size: 30px; 
  color: #c5b391; 
  pointer-events: none; 
  width: 22px; 
  text-align: center; 
  line-height: normal;
  text-shadow: 0 0 8px #000; 
}

.wheel-container.zoomed {
  position:fixed!important; 
  top:50%!important;
  left:50%!important;
  transform:translate(-50%,-50%)!important;
  width:650px!important;   
  height:650px!important;  
  z-index: 1000; 
  transition:width 0.3s ease,height 0.3s ease,transform 0.3s ease; 
}
.wheel-container.zoomed canvas {
  width:100%!important; height:100%!important;
}

.player-basket {
  list-style: none;
  padding: 8px; 
  margin: 8px 0 18px 0; 
  width: 100%;
  min-height: 90px; 
  background: #25282b; 
  border: 1px dashed #4a5056; 
  border-radius: 0;
  max-height: 200px; 
  overflow-y: auto;
  display: flex;
  flex-direction: column; 
  gap: 5px; 
}

.player-basket li {
  background: #3a3e42; 
  color: #b0b8c0;
  font-weight: bold;
  padding: 8px 12px; 
  border-radius: 0;
  text-align: center;
  font-size: 0.95em; 
  border-left: 3px solid #7a6448;
}
.player-basket li:hover {
    background: #454a4f;
}

#countryGridsContainer { /* Normál nézetben a wrapper */
    width: 100%;
}
.team-grid-wrapper { /* Wrapper a H3+grid párosnak */
    width: 100%;
    margin-bottom: 15px; 
}
.team-grid-wrapper:last-child {
    margin-bottom: 0;
}

.basket-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-auto-rows:45px; 
  gap:5px; 
  background:#25282b; 
  border:1px dashed #4a5056; 
  border-radius:0;
  padding:10px; 
  width:100%;
  margin-top:5px; /* A H3 után */
  min-height: calc(3 * 45px + 2 * 5px + 2 * 10px); 
}
.basket-cell {
  background:#31363b; 
  border:1px solid #1f2225; 
  border-radius:0; display:flex;
  align-items:center; justify-content:center;
  color:#889098; font-size:1em; 
  overflow: hidden; 
  text-overflow: ellipsis;
  white-space: nowrap;
}
.basket-cell.filled {
  background:#4a5056; 
  color:#c8d0d8; font-weight:bold;
  border-left: 3px solid #7a6448;
}

/* ÚJ: Rács nagyító ikon stílusa */
.grid-zoom-btn {
    position: absolute;
    top: 0px; /* Igazítás a H3 tetejéhez */
    right: 0px; 
    transform: translateY(0%); /* Nincs függőleges középre igazítás, ha a H3 tetején van */
    background: none !important; 
    border: none !important;
    color: #889098 !important; 
    font-size: 1.4em !important; /* Kicsit nagyobb ikon */
    padding: 0 5px !important;
    cursor: pointer;
    width: auto !important; 
    box-shadow: none !important;
    text-transform: none !important; 
    font-weight: normal !important; 
    margin: 0 !important; 
    line-height: inherit; /* A H3 sormagasságát örökölje */
}
.grid-zoom-btn:hover {
    color: #c5b391 !important;
    background: none !important;
}

/* ÚJ: Stílusok a kinagyított .team-grid-wrapper-hez */
.team-grid-wrapper.zoomed {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60vw; 
    max-width: 550px; 
    background-color: #25282beE; /* Enyhén áttetsző háttér */
    backdrop-filter: blur(5px);
    border: 1px solid #4a5056;
    padding: 25px;
    z-index: 2000; 
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
    border-radius: 3px;
    display: flex; 
    flex-direction: column;
    align-items: center; 
}

.team-grid-wrapper.zoomed h3 {
    font-size: 1.8em;
    color: #c5b391;
    margin-bottom: 20px; 
    text-align: center;
    border-bottom: 1px solid #5a6066;
    padding-bottom: 12px;
    width: auto; 
    position: static; /* Felülírja a normál nézetbeli pozicionálást */
}
.team-grid-wrapper.zoomed .grid-zoom-btn { /* Nagyított nézetben a saját nagyító ikonja ne látszódjon */
    display: none; 
}

.team-grid-wrapper.zoomed .basket-grid {
    grid-auto-rows: 65px; 
    padding: 15px; 
    gap: 8px; 
    min-height: fit-content; 
    width: auto; 
    max-width: 100%; 
}

.team-grid-wrapper.zoomed .basket-cell {
    font-size: 1.2em; 
    border-radius: 3px; 
}

/* ÚJ: Overlay a háttér sötétítéséhez, amikor egy grid ki van nagyítva */
body.grid-zoomed-active::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.70); /* Kicsit sötétebb */
    z-index: 1999; 
    pointer-events: none; /* Alapból ne fogja a kattintásokat */
}


.spin-result-overlay {
    position: fixed; 
    top: 0; left: 0; width: 100%; height: 100%;
    display: none; 
    flex-direction: column; justify-content: center; align-items: center;
    background-color: rgba(0, 0, 0, 0.75); 
    z-index: 1002; 
    pointer-events: none; 
}

.spun-item-display {
    background-color: rgba(30, 33, 36, 0.95); 
    color: #e0d6c8;
    font-family: 'Oswald', sans-serif;
    font-size: 3em; 
    padding: 20px 40px;
    border: 2px solid #4a5056;
    border-radius: 2px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.6);
    margin-bottom: 25px; 
    display: none; 
    pointer-events: auto; 
    animation: fadeInScaleUp 0.4s ease-out forwards;
}

@keyframes fadeInScaleUp {
    from { opacity: 0; transform: translateY(20px) scale(0.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}


.next-spin-step-button {
    width: auto; 
    padding: 12px 35px !important; 
    font-size: 1.15em !important;
    display: none; 
    pointer-events: auto; 
    z-index: 1003; 
}


.flyer {
  position:absolute; 
  background:#c5b391; padding:5px 10px; 
  border:1px solid #111314; border-radius:0; 
  pointer-events:none; 
  transition:transform 0.8s cubic-bezier(0.5, 0, 0.5, 1), opacity 0.8s ease; 
  white-space:nowrap; opacity:1; z-index:1001; 
  color:#1e2124; 
  font-weight:bold;
  font-size: 1em; 
  box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}