*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Tahoma,Verdana,Arial,sans-serif;color:#063d50}
body{
  background:
    radial-gradient(circle at 15% 18%, rgba(143,235,126,.58), transparent 24%),
    radial-gradient(circle at 86% 22%, rgba(73,202,111,.38), transparent 25%),
    linear-gradient(180deg,#72dfc8 0%,#9ce8ad 38%,#d5f5c7 100%);
  background-attachment:fixed;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:auto 0 0;
  height:38vh;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.7) 0 3%, transparent 3.5%),
    radial-gradient(circle at 75% 35%, rgba(255,255,255,.55) 0 2%, transparent 2.6%),
    linear-gradient(180deg,transparent,rgba(255,255,255,.35));
  pointer-events:none;
}
.sky-glow{position:fixed;right:-10vw;top:-12vw;width:42vw;height:42vw;border-radius:50%;background:radial-gradient(circle,#fff 0 8%,rgba(255,255,255,.45) 22%,transparent 65%);opacity:.7;pointer-events:none}
.bubble{position:fixed;border-radius:50%;border:2px solid rgba(255,255,255,.7);box-shadow:inset 8px 8px 18px rgba(255,255,255,.45),0 4px 12px rgba(0,80,120,.12);pointer-events:none}
.b1{width:80px;height:80px;left:5%;top:22%}
.b2{width:35px;height:35px;right:12%;top:34%}
.b3{width:120px;height:120px;right:3%;bottom:8%}

.topbar{position:relative;margin:14px auto 10px;max-width:1250px;padding:12px 18px;display:flex;align-items:center;gap:20px;border:1px solid #fff;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(206,250,255,.56));box-shadow:0 8px 25px rgba(0,80,120,.22),inset 0 1px #fff}
.logo{font-weight:900;letter-spacing:2px;font-size:26px;color:#126c38;text-shadow:0 1px #fff}
.logo span{color:#008eaa}
.tagline{font-size:11px;flex:1;opacity:.75}
.online{font-size:11px;color:#008b68;font-weight:bold}

.language-box{
  display:flex;
  align-items:center;
  gap:7px;
  margin-left:auto;
  padding:7px 10px;
  border-radius:14px;
  background:rgba(221,255,218,.48);
  border:1px solid rgba(40,130,61,.25);
  box-shadow:inset 0 1px rgba(255,255,255,.8);
}
.language-box label{
  font-size:.72rem;
  font-weight:800;
  color:#17683a;
}
#languageSelect{
  border:1px solid rgba(35,121,58,.35);
  border-radius:10px;
  padding:5px 8px;
  background:rgba(245,255,237,.86);
  color:#185f32;
  font-weight:700;
}

main{max-width:1250px;margin:auto;padding:0 12px 35px}
.panel{border:1px solid rgba(255,255,255,.95);border-radius:18px;background:linear-gradient(135deg,rgba(255,255,255,.87),rgba(218,251,255,.64));box-shadow:0 10px 30px rgba(24,105,48,.16),inset 0 1px #fff;margin:12px 0;padding:16px;backdrop-filter:blur(8px)}
.panel-title{font-size:13px;font-weight:900;letter-spacing:1.5px;color:#05718c;border-bottom:1px solid rgba(0,120,150,.18);padding-bottom:9px;margin-bottom:12px}
.center{text-align:center}
.hidden{display:none!important}

.hero-grid{display:grid;grid-template-columns:220px 1fr 220px;gap:12px}
.side{min-height:520px}
.wheel-panel{min-height:520px}

.wheel-wrap{position:relative;width:min(380px,80vw);aspect-ratio:1;margin:15px auto}
.wheel{
  width:100%;
  height:100%;
  border-radius:50%;
  border:12px solid rgba(255,255,255,.8);
  box-shadow:0 12px 30px rgba(0,70,110,.28),inset 0 0 0 2px #75d4e7;
  position:relative;
  background:conic-gradient(#64cde0 0 16.66%,#b7eff4 16.66% 33.33%,#72d5e4 33.33% 50%,#d1f7f7 50% 66.66%,#74d8e7 66.66% 83.33%,#d9fbfa 83.33% 100%);
  transition:transform 4s cubic-bezier(.12,.7,.12,1);
  overflow:hidden;
}
.wheel:after{content:"";position:absolute;inset:9%;border-radius:50%;border:2px dashed rgba(255,255,255,.8);pointer-events:none}
.wheel-center{
  position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);
  width:105px;height:105px;border-radius:50%;display:grid;place-content:center;text-align:center;
  background:radial-gradient(circle at 30% 20%,#fff,#a7eef5 65%,#5fc8dc);
  border:5px solid #fff;box-shadow:0 5px 14px rgba(0,70,100,.28);
  font-weight:900;font-size:13px;color:#08718b;
}
.wheel-center small{font-size:9px}
.pointer{position:absolute;z-index:5;left:50%;top:-8px;transform:translateX(-50%);font-size:35px;color:#ff6e65;text-shadow:0 2px #fff}

.wheel-label{
  position:absolute;
  left:50%;
  top:50%;
  width:0;
  height:0;
  transform-origin:center center;
  pointer-events:none;
  z-index:2;
}
.wheel-label span{
  display:block;
  width:110px;
  margin-left:-55px;
  text-align:center;
  font-size:9px;
  font-weight:800;
  color:#065a6e;
  text-shadow:0 1px 0 #fff, 0 0 4px rgba(255,255,255,.8);
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.wheel-actions{text-align:center}
.spin-btn,.lucky-btn,.aero-btn,.glass-btn{
  border:1px solid #fff;border-radius:11px;padding:10px 14px;font-weight:900;cursor:pointer;font-family:inherit;
  box-shadow:0 4px 10px rgba(0,80,120,.15),inset 0 1px #fff;
}
.spin-btn{font-size:18px;background:linear-gradient(#e9ffff,#69d3e5);color:#07556c}
.lucky-btn{background:linear-gradient(#fff5c9,#ffd86d);color:#6d5600;margin-left:7px}
.aero-btn{background:linear-gradient(#dfffff,#72dce9);color:#075b70}
.glass-btn{background:rgba(255,255,255,.48);color:#075b70}
.glass-btn:hover,.spin-btn:hover,.lucky-btn:hover,.aero-btn:hover{filter:brightness(1.05);transform:translateY(-1px)}
.wide{width:100%;margin:5px 0}

.chaos{display:block;text-align:center;font-size:11px;margin-top:15px;font-weight:bold}
.chaos input{vertical-align:middle;width:130px}
.mini-note{font-size:11px;line-height:1.5;padding:10px;background:rgba(255,255,255,.4);border-radius:10px;margin-top:15px}
.recent{margin-top:18px;font-size:11px}
.recent div{padding:6px;border-bottom:1px solid rgba(0,100,130,.12)}

select{width:100%;margin:6px 0;padding:9px;border-radius:10px;border:1px solid #9bdde7;background:rgba(255,255,255,.75);color:#07566b;font-weight:bold}

.controls{display:flex;align-items:center;gap:15px;flex-wrap:wrap}
.controls .panel-title{margin:0;border:0}
.toggles{display:flex;gap:7px;flex-wrap:wrap}
.toggle{padding:7px 10px;border-radius:12px;background:rgba(255,255,255,.6);border:1px solid #b3e8ef;cursor:pointer;font-size:11px;font-weight:bold}
.toggle.off{opacity:.4;text-decoration:line-through}
.filter-row{margin-left:auto}

.result{animation:pop .35s ease}
.result-card{display:grid;grid-template-columns:130px 1fr;gap:18px;align-items:center}
.poster{height:175px;border-radius:12px;background:linear-gradient(145deg,#8de4ef,#dffcff);display:grid;place-content:center;text-align:center;font-size:35px;border:3px solid #fff;box-shadow:0 6px 15px rgba(0,80,120,.2)}
.result h2{margin:0 0 4px;font-size:28px;color:#07576c}
.type{font-size:11px;font-weight:bold;color:#008ba4}
.match{margin:12px 0;font-size:14px}
.meter{height:12px;background:rgba(0,80,100,.12);border-radius:10px;overflow:hidden}
.meter i{display:block;height:100%;background:linear-gradient(90deg,#49c9d9,#8be7c5);border-radius:10px}
.why{font-size:12px;line-height:1.5}
.ratings button{font-size:18px;margin:4px;padding:7px 9px;border:1px solid #fff;border-radius:10px;background:rgba(255,255,255,.7);cursor:pointer}

.view-title{font-size:18px;font-weight:900}
.list{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:9px}
.item{padding:12px;border-radius:12px;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.9);font-size:12px}
.item b{font-size:14px}
.item button{float:right}

.onboarding{max-width:900px;margin:6vh auto}
.answer-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.answer-grid.three{grid-template-columns:1fr 1fr 1fr}
.answer-box textarea{width:100%;min-height:90px;border:1px solid #9bdde7;border-radius:10px;padding:10px;background:rgba(255,255,255,.7);font:inherit;resize:vertical}
.answer-box h3{font-size:12px;margin:0 0 6px}
.onboard-actions{display:flex;justify-content:space-between;align-items:center;margin-top:14px;gap:10px;flex-wrap:wrap}

footer{text-align:center;font-size:10px;padding:10px;color:#07556b}
footer a{color:#007c96}

@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .side{min-height:auto}
  .wheel-panel{order:-1}
  .tagline{display:none}
  .answer-grid.three{grid-template-columns:1fr}
}
@media(max-width:560px){
  .answer-grid{grid-template-columns:1fr}
  .result-card{grid-template-columns:1fr}
  .poster{height:120px}
  .spin-btn{width:100%}
  .lucky-btn{width:100%;margin:7px 0 0}
  .wheel-label span{font-size:8px;width:90px;margin-left:-45px}
}

/* FRUTIGER ECO accents */
:root{
  --eco-green:#35b85a;
  --eco-dark:#16723b;
  --eco-light:#b9f5bd;
  --eco-lime:#8de36d;
  --eco-water:#55d7c5;
  --eco-leaf:#237a3a;
}
.panel,.card,.glass,.roulette-card{
  border-color:rgba(39,139,65,.32);
  box-shadow:0 12px 35px rgba(24,105,48,.16), inset 0 1px rgba(255,255,255,.78);
}
button{
  border-color:rgba(25,120,53,.42);
  box-shadow:0 5px 0 rgba(22,114,59,.18), inset 0 1px rgba(255,255,255,.85);
}
button:hover{
  filter:saturate(1.08) brightness(1.04);
}
h1,h2,h3,.logo{
  color:#126c38;
  text-shadow:0 1px rgba(255,255,255,.75);
}
a{color:#137842}