/* ============ CHOOSE YOUR MOOD — kiosk ============ */
:root{
  --bg-1:#0d2436;
  --bg-2:#04101c;
  --neon:#7ee8f7;
  --neon-soft:#bff3fb;
  --hub:#e4e93f;
  --hub-ink:#1b1b0c;
  --btn:#c9ec4e;
  --btn-ink:#12200a;
  --pointer:#ff2d55;
  --card-line:#66ff8a;
  --ink:#eaf7ff;
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{
  width:100%;height:100%;overflow:hidden;
  background:#000;color:var(--ink);
  font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

#stage{
  position:fixed;inset:0;
  display:flex;align-items:center;justify-content:center;gap:1.6vw;
  padding:1vh 2.5vw;
  background:
    radial-gradient(ellipse 70% 80% at 42% 50%, var(--bg-1) 0%, var(--bg-2) 55%, #000 100%);
}

/* ---------- çark ---------- */
#wheel-wrap{
  position:relative;
  height:98vh;width:98vh;max-width:68vw;max-height:68vw;
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
}
#wheel-svg{width:100%;height:100%;display:block;}

#rotor{transform-origin:0 0;}

.rim{fill:none;stroke:var(--neon);stroke-width:1.6;}
.rim-thin{fill:none;stroke:var(--neon);stroke-width:.9;opacity:.85;}
.spoke{stroke:var(--neon);stroke-width:.55;opacity:.55;}
.label{
  fill:var(--neon-soft);
  font-size:9.4px;
  font-weight:600;
  letter-spacing:.55px;
  dominant-baseline:middle;
}
.chip{fill:color-mix(in srgb, var(--neon) 10%, transparent);stroke:var(--neon);stroke-width:.9;}
.chip-e{font-size:15px;text-anchor:middle;dominant-baseline:central;}

#glow{filter:drop-shadow(0 0 3px color-mix(in srgb, var(--neon) 75%, transparent))
             drop-shadow(0 0 9px color-mix(in srgb, var(--neon) 35%, transparent));}

/* göbek — dönmez */
.hub-face{fill:var(--hub);stroke:#0a0a04;stroke-width:1.6;}
.hub-t1{fill:var(--hub-ink);font-size:26px;text-anchor:middle;letter-spacing:1px;
  font-family:"Comic Sans MS","Segoe Print","Bradley Hand",cursive;}
.hub-t2{fill:var(--hub-ink);font-size:15px;text-anchor:middle;
  font-family:"Comic Sans MS","Segoe Print","Bradley Hand",cursive;}
.hub-smile{fill:none;stroke:var(--hub-ink);stroke-width:3;stroke-linecap:round;}

/* ibre */
.pointer{fill:none;stroke:var(--pointer);stroke-width:4;
  filter:drop-shadow(0 0 6px color-mix(in srgb, var(--pointer) 90%, transparent));}

/* çark, sonuç açıkken sönükleşir */
#wheel-svg{transition:opacity .45s ease, filter .45s ease;}
body.result-on #wheel-svg{opacity:.30;filter:saturate(.5) blur(1px);}

/* ---------- ÇEVİR butonu ---------- */
#spin{
  flex:0 0 auto;
  background:var(--btn);color:var(--btn-ink);
  border:2px solid #eaffa8;border-radius:14px;
  font-size:clamp(22px,3.4vh,44px);font-weight:700;letter-spacing:2px;
  padding:.62em 1.25em;cursor:pointer;
  box-shadow:0 0 22px color-mix(in srgb, var(--btn) 55%, transparent),
              inset 0 0 12px rgba(255,255,255,.35);
  transition:transform .12s ease, box-shadow .25s ease, opacity .25s ease;
}
#spin:active{transform:scale(.95);}
#spin:disabled{opacity:.45;cursor:default;box-shadow:none;}

/* ---------- sonuç kartı ---------- */
#result{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%) scale(.72);
  width:44%;aspect-ratio:1/1.06;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:7%;
  background:rgba(6,22,34,.94);
  border:3px solid var(--card-line);border-radius:9%;
  box-shadow:0 0 26px color-mix(in srgb, var(--card-line) 60%, transparent),
              inset 0 0 34px color-mix(in srgb, var(--card-line) 12%, transparent);
  opacity:0;pointer-events:none;
  transition:opacity .35s ease, transform .45s cubic-bezier(.2,1.5,.4,1);
}
body.result-on #result{opacity:1;transform:translate(-50%,-50%) scale(1);}
#result-emoji{font-size:min(17vh,14.5vw);line-height:1;
  filter:drop-shadow(0 0 14px rgba(126,232,247,.5));}
#result-text{
  font-size:min(calc(6.2vh * var(--rt-k,1)), calc(5.4vw * var(--rt-k,1)));
  font-weight:700;letter-spacing:2px;
  text-align:center;padding:0 6%;line-height:1.1;color:#fff;
  text-shadow:0 0 16px rgba(126,232,247,.55);
}

/* ---------- köşe araçları ---------- */
.tool{
  position:fixed;bottom:10px;
  background:rgba(255,255,255,.05);color:rgba(234,247,255,.45);
  border:1px solid rgba(234,247,255,.15);border-radius:8px;
  font-size:16px;line-height:1;padding:8px 10px;cursor:pointer;
  transition:color .2s,background .2s;
}
.tool:hover{color:#fff;background:rgba(255,255,255,.14);}
#btn-sound{right:96px;}
#btn-full{right:52px;}
#btn-cfg{right:10px;}

/* ---------- ayarlar ---------- */
#cfg{
  position:fixed;inset:0;z-index:20;display:none;
  background:rgba(2,10,18,.93);
  padding:4vh 6vw;overflow:auto;
}
#cfg.open{display:block;}
#cfg h2{font-size:22px;margin-bottom:6px;color:var(--neon);}
#cfg p{font-size:13px;opacity:.65;margin-bottom:14px;line-height:1.5;}
#cfg textarea{
  width:100%;height:52vh;resize:vertical;
  background:#04121f;color:#dff4ff;
  border:1px solid rgba(126,232,247,.35);border-radius:10px;
  padding:12px;font-family:Consolas,"Courier New",monospace;font-size:14px;line-height:1.6;
}
#cfg .row{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;}
#cfg button{
  background:var(--btn);color:var(--btn-ink);border:0;border-radius:9px;
  padding:11px 20px;font-size:15px;font-weight:700;cursor:pointer;
}
#cfg button.ghost{background:transparent;color:var(--ink);border:1px solid rgba(234,247,255,.3);}
#cfg-msg{font-size:13px;color:#ff9aa9;margin-top:10px;min-height:18px;}

/* ---------- dar / dikey ekran (telefon, tablet) ---------- */
@media (max-aspect-ratio:1/1){
  #stage{flex-direction:column;justify-content:center;gap:3vh;padding:2vh 2vw;}

  /* kare kalsın ve hem genişliğe hem yüksekliğe sığsın:
     height:auto bırakılınca SVG taşıp ekrandan kesiliyordu */
  #wheel-wrap{
    width:min(96vw, 60vh);
    height:min(96vw, 60vh);
    max-width:none;max-height:none;
  }

  #spin{font-size:clamp(22px,6vw,40px);padding:.6em 1.7em;letter-spacing:3px;}

  /* kart ve içindekiler telefonda okunur boyda */
  #result{width:76%;}
  #result-emoji svg.face-svg{width:min(17vh,42vw);}
  #result-text{font-size:min(calc(4.6vh * var(--rt-k,1)), calc(9.5vw * var(--rt-k,1)));}

  /* köşe düğmeleri küçülsün, ekrandan taşmasın */
  .tool{font-size:14px;padding:7px 9px;bottom:8px;}
  #btn-sound{right:84px;} #btn-full{right:46px;} #btn-cfg{right:8px;}
}

/* boşta kalınca ÇEVİR butonu nabız gibi atsın */
@keyframes attract{
  0%,100%{transform:scale(1);    box-shadow:0 0 22px rgba(201,236,78,.45), inset 0 0 12px rgba(255,255,255,.35);}
  50%    {transform:scale(1.06); box-shadow:0 0 40px rgba(201,236,78,.85), inset 0 0 18px rgba(255,255,255,.5);}
}
#spin.attract{animation:attract 1.6s ease-in-out infinite;}

/* ---------- çizilmiş yüzler (faces.js) ---------- */
:root{
  --f-disc:#e9f9ff;   /* yüz diski */
  --f-ink:#0d3f4d;    /* mürekkep */
  --f-pupil:#1c7f99;  /* göz bebeği */
  --f-acc:#ff3b5c;    /* kırmızı aksan */
}
.face .f-disc      {fill:var(--f-disc);stroke:var(--f-ink);stroke-width:3;}
.face .f-ring      {fill:none;stroke:var(--f-ink);stroke-width:1.4;opacity:.45;}
.face .f-ink       {fill:none;stroke:var(--f-ink);stroke-linecap:round;stroke-linejoin:round;}
.face .f-fill      {fill:var(--f-ink);stroke:none;}
.face .f-white-s   {fill:var(--f-disc);stroke:var(--f-ink);stroke-linecap:round;stroke-linejoin:round;}
.face .f-white     {fill:var(--f-disc);stroke:none;}
.face .f-white-line{fill:none;stroke:var(--f-disc);stroke-linecap:round;}
.face .f-pupil     {fill:var(--f-pupil);stroke:none;}
.face .f-pupil-s   {fill:none;stroke:var(--f-pupil);stroke-linecap:round;stroke-linejoin:round;}
.face .f-acc       {fill:none;stroke:var(--f-acc);stroke-linecap:round;}
.face .f-acc-f     {fill:var(--f-acc);stroke:none;}
.face text         {text-anchor:middle;font-family:"Segoe UI",Arial,sans-serif;font-weight:800;}
.face .f-glyph     {fill:var(--f-ink);font-size:20px;}
.face .f-glyph-acc {fill:var(--f-acc);font-size:30px;}
.face .f-glyph-sm  {fill:var(--f-ink);font-size:17px;}
.face .f-glyph-xs  {fill:var(--f-ink);font-size:12px;}

/* sonuç kartındaki büyük yüz */
#result-emoji svg.face-svg{
  width:min(25vh,21vw);height:auto;display:block;
  filter:drop-shadow(0 0 14px rgba(126,232,247,.55));
}
.face .f-drop      {fill:#8fe4f5;stroke:none;}
.face .f-glyph-sm  {fill:var(--f-disc);}
.face .f-glyph-xs  {fill:var(--f-disc);}

/* dönerken glow filtresini bırak: yüzlerle birlikte düğüm sayısı arttı,
   zayıf kiosk kutularında her karede filtre hesaplamak takılmaya yol açıyor */
#rotor{will-change:transform;}
body.spinning #glow{filter:none;}

/* ---------- ayar paneli: sekmeler ---------- */
#cfg{display:none;place-items:center;}
#cfg.open{display:grid;}
#cfg-box{
  width:min(720px,92vw);max-height:92vh;overflow:auto;
  background:#06192a;border:1px solid rgba(126,232,247,.28);border-radius:16px;
  padding:22px 24px;box-shadow:0 20px 60px rgba(0,0,0,.6);
}
#cfg-box h2{margin-bottom:14px;}

#cfg-tabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap;}
#cfg-tabs button{
  background:transparent;color:rgba(234,247,255,.6);
  border:1px solid rgba(234,247,255,.18);border-radius:9px;
  padding:8px 16px;font-size:14px;font-weight:600;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s;
}
#cfg-tabs button:hover{color:#fff;}
#cfg-tabs button.on{background:rgba(126,232,247,.14);color:var(--neon);
  border-color:rgba(126,232,247,.5);}

#cfg-box section{display:none;}
#cfg-box section.on{display:block;}
#cfg-box textarea{height:44vh;}

/* renk ızgarası */
#cfg-renkler{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;}
.renk{display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.04);border-radius:10px;padding:8px 10px;}
.renk input[type=color]{
  inline-size:38px;block-size:30px;padding:0;flex:0 0 auto;cursor:pointer;
  background:none;border:1px solid rgba(234,247,255,.25);border-radius:7px;
}
.renk span{font-size:13px;line-height:1.3;}

/* davranış satırları */
.satir{display:flex;align-items:center;gap:14px;margin:6px 0 2px;font-size:15px;}
.satir input[type=range]{flex:1;min-width:140px;accent-color:var(--btn);}
.satir.kutu{gap:10px;cursor:pointer;}
.satir input[type=checkbox]{inline-size:19px;block-size:19px;accent-color:var(--btn);cursor:pointer;}
#cfg-sure-deger{min-width:74px;text-align:right;font-weight:700;color:var(--neon);
  font-variant-numeric:tabular-nums;}
.ipucu{font-size:12px;opacity:.55;margin:0 0 16px;line-height:1.5;}

#cfg-box .row{margin-top:16px;}
#cfg-box section .row{margin-top:12px;}

/* ---------- buton gizliyken dokunma yönergesi ---------- */
#hint{
  flex:0 0 auto;color:var(--neon);opacity:.55;
  font-size:clamp(14px,2vh,20px);letter-spacing:2px;text-transform:uppercase;
  animation:hint-nabiz 2.6s ease-in-out infinite;
}
#hint[hidden]{display:none;}
body.result-on #hint,body.spinning #hint{visibility:hidden;}
@keyframes hint-nabiz{0%,100%{opacity:.32}50%{opacity:.72}}

/* butonu gizle seçildiğinde */
body.butonsuz #spin{display:none;}

@media (prefers-reduced-motion:reduce){
  #hint{animation:none;opacity:.55;}
  #spin.attract{animation:none;}
}

/* buton gizliyken: çark boşalan yeri kullansın, yönerge altına insin */
body.butonsuz #stage{flex-direction:column;gap:1.6vh;}
body.butonsuz #wheel-wrap{
  width:min(96vh,96vw);height:min(96vh,96vw);max-width:none;max-height:none;
}

/* renk kutucuğu: yerel görünüm yerine düz renk lekesi */
.renk input[type=color]::-webkit-color-swatch-wrapper{padding:2px;}
.renk input[type=color]::-webkit-color-swatch{border:none;border-radius:5px;}