/* Kolo štěstí – jkliment.cz (responsive + prefers-reduced-motion) */
.wheel-wrap{padding:1.2rem;}
.wheel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1rem;}
.wheel-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:1rem;align-items:start;}
.wheel-stage{display:flex;flex-direction:column;gap:.9rem;}
.wheel-panel{display:flex;flex-direction:column;gap:1rem;}

.wheel-canvas-wrap{
  position:relative;
  width:100%;
  max-width:680px;
  margin:0 auto;
  aspect-ratio:1/1;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.35));
  box-shadow:0 10px 35px rgba(0,0,0,.10);
  overflow:hidden;
}

.wheel-canvas-wrap canvas{
  width:100%;
  height:100%;
  display:block;
  background:transparent;
}

.wheel-pointer{
  position:absolute;
  top:14px;
  left:50%;
  width:0;height:0;
  transform:translateX(-50%);
  border-left:16px solid transparent;
  border-right:16px solid transparent;
  border-bottom:30px solid #e11d48;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.25));
  z-index:5;
}

.wheel-overlay{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at center, rgba(0,0,0,.35), rgba(0,0,0,.08) 55%, rgba(0,0,0,0) 70%);
  z-index:6;
}

.wheel-result{
  min-width:min(420px, 90%);
  border-radius:22px;
  padding:1rem 1.1rem;
  background:rgba(17,24,39,.78);
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 18px 55px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
}
.wheel-result-label{font-size:.85rem;opacity:.85;}
.wheel-result-value{font-size:1.6rem;font-weight:800;letter-spacing:.2px;margin-top:.15rem;word-break:break-word;}

.wheel-actions{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;justify-content:center;}
.wheel-hint{margin:0;text-align:center;}

.field{display:flex;flex-direction:column;gap:.5rem;}
.field-row{display:flex;align-items:center;justify-content:space-between;gap:.6rem;}
.field-label{font-weight:700;}
.field-actions{display:flex;gap:.4rem;flex-wrap:wrap;}
.btn.tiny{padding:.35rem .55rem;font-size:.85rem;border-radius:10px;}
.btn.ghost{background:transparent;border:1px dashed rgba(0,0,0,.18);}
.btn.ghost:hover{border-style:solid;}

.wheel-textarea{
  width:100%;
  resize:vertical;
  min-height:180px;
  padding:.7rem .75rem;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.14);
  background:rgba(255,255,255,.85);
  outline:none;
  font:inherit;
  line-height:1.35;
}
.wheel-textarea:focus{
  border-color:rgba(59,130,246,.55);
  box-shadow:0 0 0 3px rgba(59,130,246,.18);
}

.wheel-mini{font-size:.9rem;}

.wheel-style{display:flex;gap:.5rem;flex-wrap:wrap;}
.chip-radio{display:inline-flex;align-items:center;}
.chip-radio input{position:absolute;opacity:0;pointer-events:none;}
.chip-radio span{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.42rem .65rem;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.14);
  background:rgba(255,255,255,.75);
  cursor:pointer;
  transition:transform .08s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
  user-select:none;
}
.chip-radio input:checked + span{
  border-color:rgba(59,130,246,.55);
  box-shadow:0 6px 18px rgba(59,130,246,.18);
  background:rgba(59,130,246,.10);
}
.chip-radio span:active{transform:translateY(1px);}

.wheel-history{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
}
.wheel-chip{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.35rem .55rem;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background:rgba(255,255,255,.70);
  font-size:.92rem;
}
.wheel-chip b{font-weight:800;}
.wheel-chip .dot{
  width:.45rem;height:.45rem;border-radius:999px;background:rgba(59,130,246,.65);
}

.wheel-badge{
  margin-left:.15rem;
  padding:.18rem .45rem;
  border-radius:999px;
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.2px;
  color:rgba(15,23,42,.9);
  background:rgba(34,197,94,.18);
  border:1px solid rgba(34,197,94,.22);
}

@media (max-width: 980px){
  .wheel-grid{grid-template-columns:1fr;gap:1rem;}
  .wheel-panel{order:2;}
}
@media (max-width: 520px){
  .wheel-wrap{padding:1rem;}
  .wheel-pointer{top:10px;border-left-width:14px;border-right-width:14px;border-bottom-width:26px;}
  .wheel-result-value{font-size:1.35rem;}
}

/* Reduced motion: keep it snappy, no rollercoaster. */
@media (prefers-reduced-motion: reduce){
  .chip-radio span, .btn{transition:none !important;}
}