.legend-shell{
  max-width:1280px;
  margin:20px auto 34px;
  padding:0 16px;
  display:grid;
  gap:16px;
}
.legend-hero{
  border-radius:20px;
  padding:20px;
  color:#fff;
  background:linear-gradient(130deg, rgba(8,98,47,.95), rgba(8,60,35,.92)),
    url("https://images.unsplash.com/photo-1534790566855-4cb788d389ec?q=80&w=1800&auto=format&fit=crop") center/cover no-repeat;
}
.legend-hero h1{margin:0 0 6px;font-size:42px}
.legend-hero p{margin:0;font-size:18px}

.roulette-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:16px}
.roulette-panel,.legend-board{background:#fff;border-radius:18px;padding:18px}
.wallet-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.wallet{background:#f1f5f1;border-radius:12px;padding:10px 12px}
.wallet span{display:block;font-size:12px;color:#5b6a5e}
.wallet strong{font-size:24px;color:#0d6237}

.wheel-wrap{
  position:relative;
  width:min(560px,100%);
  margin:8px auto 16px;
  aspect-ratio:1/1;
  display:grid;
  place-items:center;
}
.wheel-wrap::before{
  content:"";
  position:absolute;
  inset:2%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(29,159,90,.34), rgba(7,51,30,.95));
  filter:blur(6px);
  z-index:0;
}
.wheel{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  border-radius:50%;
  border:10px solid #f5b600;
  background:
    conic-gradient(
      #2a7ed9 0deg 45deg,
      #e1117e 45deg 90deg,
      #d78300 90deg 135deg,
      #10aa44 135deg 180deg,
      #2a7ed9 180deg 225deg,
      #e1117e 225deg 270deg,
      #d78300 270deg 315deg,
      #10aa44 315deg 360deg
    );
  box-shadow:
    0 20px 45px rgba(10,34,20,.35),
    inset 0 0 0 14px rgba(255,255,255,.07),
    inset 0 0 40px rgba(0,0,0,.22);
  transition:transform 4.2s cubic-bezier(.2,.9,.2,1);
  overflow:hidden;
}
.wheel::before{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:50%;
  background:
    radial-gradient(circle at center, transparent 62%, rgba(0,0,0,.26) 100%),
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.3), transparent 45%);
  pointer-events:none;
}
.wheel::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  border:4px dashed rgba(255,240,180,.75);
  animation:spinLights 9s linear infinite;
  pointer-events:none;
}
.wheel-labels span{
  position:absolute;
  left:50%;
  top:50%;
  transform-origin:center;
  color:#fff;
  font-weight:900;
  font-size:34px;
  text-shadow:0 3px 8px rgba(0,0,0,.35);
  user-select:none;
}
.wheel-labels .l1{transform:translate(-50%,-50%) rotate(22.5deg) translateY(-205px) rotate(90deg)}
.wheel-labels .l2{transform:translate(-50%,-50%) rotate(67.5deg) translateY(-205px) rotate(90deg)}
.wheel-labels .l3{transform:translate(-50%,-50%) rotate(112.5deg) translateY(-205px) rotate(90deg)}
.wheel-labels .l4{transform:translate(-50%,-50%) rotate(157.5deg) translateY(-205px) rotate(90deg)}
.wheel-labels .l5{transform:translate(-50%,-50%) rotate(202.5deg) translateY(-205px) rotate(90deg)}
.wheel-labels .l6{transform:translate(-50%,-50%) rotate(247.5deg) translateY(-205px) rotate(90deg)}
.wheel-labels .l7{transform:translate(-50%,-50%) rotate(292.5deg) translateY(-205px) rotate(90deg)}
.wheel-labels .l8{transform:translate(-50%,-50%) rotate(337.5deg) translateY(-205px) rotate(90deg)}
.wheel-core{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:120px;
  height:120px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-weight:900;
  letter-spacing:1px;
  color:#0a6b36;
  background:radial-gradient(circle at 35% 30%, #ffffff, #e3f5e8 70%);
  box-shadow:0 8px 20px rgba(0,0,0,.2), inset 0 0 0 8px #0ab74d;
}
.wheel-pointer{
  position:absolute;
  top:8px;left:50%;
  transform:translateX(-50%);
  width:0;height:0;
  border-left:16px solid transparent;
  border-right:16px solid transparent;
  border-top:0;
  border-bottom:30px solid #ffffff;
  z-index:2;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.22));
}
@keyframes spinLights{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

.wheel-controls{display:grid;gap:8px}
#legend-stake{width:100%}
.stake-marks{display:grid;grid-template-columns:repeat(5,1fr);font-weight:700;color:#335445}
#legend-spin{
  min-height:48px;border:none;border-radius:12px;cursor:pointer;
  background:linear-gradient(180deg,#92d916,#65b60f);color:#fff;font-size:18px;font-weight:800;
}
#legend-result{margin:0;color:#365846;font-weight:700}

.legend-board h2{margin:0 0 10px}
.legend-board table{width:100%;border-collapse:collapse}
.legend-board th,.legend-board td{padding:8px 6px;border-bottom:1px solid #edf1ed;text-align:left}
.legend-board td:last-child,.legend-board th:last-child{text-align:right}
.legend-board .me{background:#eef8ea;font-weight:800}

@media(max-width:960px){
  .roulette-grid{grid-template-columns:1fr}
  .wallet-row{grid-template-columns:1fr}
  .wheel-labels span{font-size:25px}
  .wheel-labels .l1,.wheel-labels .l2,.wheel-labels .l3,.wheel-labels .l4,
  .wheel-labels .l5,.wheel-labels .l6,.wheel-labels .l7,.wheel-labels .l8{
    transform-origin:center;
  }
  .wheel-labels .l1{transform:translate(-50%,-50%) rotate(22.5deg) translateY(-160px) rotate(90deg)}
  .wheel-labels .l2{transform:translate(-50%,-50%) rotate(67.5deg) translateY(-160px) rotate(90deg)}
  .wheel-labels .l3{transform:translate(-50%,-50%) rotate(112.5deg) translateY(-160px) rotate(90deg)}
  .wheel-labels .l4{transform:translate(-50%,-50%) rotate(157.5deg) translateY(-160px) rotate(90deg)}
  .wheel-labels .l5{transform:translate(-50%,-50%) rotate(202.5deg) translateY(-160px) rotate(90deg)}
  .wheel-labels .l6{transform:translate(-50%,-50%) rotate(247.5deg) translateY(-160px) rotate(90deg)}
  .wheel-labels .l7{transform:translate(-50%,-50%) rotate(292.5deg) translateY(-160px) rotate(90deg)}
  .wheel-labels .l8{transform:translate(-50%,-50%) rotate(337.5deg) translateY(-160px) rotate(90deg)}
  .wheel-core{width:94px;height:94px}
}