/**
 * SS Fortuna - Wersja 4.0.1 (Styl Spawalniczy + Koło DOM)
 */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700&display=swap');

:root {
  --ss-fortuna-bg-dark: #1f2328; --ss-fortuna-bg-light: #2a2f36; --ss-fortuna-border-color: #4a525a;
  --ss-fortuna-text-primary: #e8f8f7; --ss-fortuna-text-secondary: #b0c0d1; --ss-fortuna-accent-glow: #00e5ff;
  --ss-fortuna-accent-hot: #ffaf00; --ss-fortuna-metal-light: #d0d3d8; --ss-fortuna-metal-dark: #a1aab4;
  --ss-fortuna-font: "Roboto Condensed", system-ui, -apple-system, sans-serif;
}
.ss-fortuna-scope .ss-fortuna-modal { position: fixed; inset: 0; background: rgba(10, 12, 15, .8); backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; z-index: 9998; padding: 24px; }
.ss-fortuna-scope .ss-fortuna { background: linear-gradient(160deg, var(--ss-fortuna-bg-light), var(--ss-fortuna-bg-dark)); color: var(--ss-fortuna-text-primary); border-radius: 18px; width: min(440px, 96vw); box-shadow: 0 24px 64px rgba(0, 0, 0, .55); position: relative; overflow: hidden; border: 1px solid var(--ss-fortuna-border-color); font-family: var(--ss-fortuna-font); }
.ss-fortuna-scope .ss-fortuna-header { padding: 16px 20px; border-bottom: 1px solid rgba(255, 255, 255, .08); background: rgba(0,0,0,.1); }
.ss-fortuna-scope .ss-fortuna-header h3 { margin: 0; font-weight: 700; letter-spacing: .3px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.ss-fortuna-scope .ss-fortuna-body { padding: 32px 24px 24px; text-align: center; }
.ss-fortuna-scope .ss-fortuna-close { position: absolute; top: 8px; right: 10px; width: 36px; height: 36px; border: none; background: transparent; color: var(--ss-fortuna-text-secondary); font-size: 28px; cursor: pointer; transition: color .2s; z-index: 10; }
.ss-fortuna-scope .ss-fortuna-close:hover { color: #fff; }
.ss-fortuna-scope .ss-fortuna-spin-btn { display: inline-block; padding: 14px 32px; border-radius: 8px; border: 1px solid #111; cursor: pointer; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #fff; background: linear-gradient(180deg, #5f6770, #3c424a); box-shadow: 0 8px 18px rgba(0, 0, 0, .4), inset 0 1px 1px rgba(255, 255, 255, .15); transition: all .15s ease-out; font-family: var(--ss-fortuna-font); margin-top: 32px; }
.ss-fortuna-scope .ss-fortuna-spin-btn:hover { background: linear-gradient(180deg, #6e767f, #4a515a); }
.ss-fortuna-scope .ss-fortuna-spin-btn:active { transform: translateY(2px); box-shadow: 0 4px 10px rgba(0, 0, 0, .4), inset 0 1px 2px rgba(0, 0, 0, .2); }
.ss-fortuna-scope .ss-fortuna-spin-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; background: #3c424a; }
.ss-fortuna-scope .ss-fortuna-result { margin-top: 16px; min-height: 28px; font-weight: 700; font-size: 1.2em; color: var(--ss-fortuna-accent-hot); text-shadow: 0 0 12px var(--ss-fortuna-accent-hot); transition: opacity .3s; }
.ss-fortuna-scope .ss-fortuna-fab { position: fixed; bottom: 20px; left: 20px; width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--ss-fortuna-border-color); font-size: 28px; color: #fff; line-height: 60px; background: radial-gradient(circle at 70% 30%, #454c55, #181c20); box-shadow: 0 10px 25px rgba(0, 0, 0, .4), inset 0 2px 4px rgba(255, 255, 255, .1); cursor: pointer; z-index: 9999; text-align: center; transition: transform .2s ease-out; }
.ss-fortuna-scope .ss-fortuna-fab:hover { transform: scale(1.05); }
.ss-fortuna-scope .ss-fab-right { right: 20px; left: auto; }

/* --- KOŁO DOM --- */
.ss-fortuna-scope .ss-wof-container { position: relative; width: min(380px, 85vw); height: min(380px, 85vw); margin: 0 auto; }
.ss-fortuna-scope .ss-wof-pointer { position: absolute; top: -14px; left: 50%; width: 28px; height: 48px; transform: translateX(-50%); z-index: 10; filter: drop-shadow(0 8px 10px rgba(0,0,0,.5)); border: none; }
.ss-fortuna-scope .ss-wof-pointer::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(var(--ss-fortuna-metal-light), var(--ss-fortuna-metal-dark)); clip-path: polygon(25% 0, 75% 0, 100% 100%, 0% 100%); border-radius: 4px 4px 0 0; }
.ss-fortuna-scope .ss-wof-pointer::after { content: ''; position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 18px solid var(--ss-fortuna-accent-glow); filter: drop-shadow(0 -2px 8px var(--ss-fortuna-accent-glow)); }
.ss-fortuna-scope .spinning .ss-wof-pointer { animation: ss-wiggle .15s infinite ease-in-out; }
@keyframes ss-wiggle { 0% { transform: translateX(-50%) rotate(-6deg); } 50% { transform: translateX(-50%) rotate(6deg); } 100% { transform: translateX(-50%) rotate(-6deg); } }

.ss-fortuna-scope .ss-wof-wheel { position: relative; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 8px #111316, 0 0 0 10px var(--ss-fortuna-border-color), inset 0 0 20px rgba(0,0,0,.5); transition: transform 6s cubic-bezier(0.2, 0.8, 0.3, 1); }
.ss-fortuna-scope .ss-wof-slice { position: absolute; top: 0; left: 0; width: 100%; height: 100%; clip-path: polygon(50% 50%, 50% 0, calc(50% + 50% * tan(var(--slice-deg))) 0); transform-origin: 50% 50%; transform: rotate(var(--slice-rotation)); }
.ss-fortuna-scope .ss-wof-slice-content { position: absolute; inset: 0; transform-origin: 50% 50%; transform: rotate(calc(var(--slice-deg) / 2)); }
.ss-fortuna-scope .ss-wof-slice-content span { display: block; position: absolute; top: 15%; right: 10px; transform: rotate(-90deg); transform-origin: bottom right; font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5); text-transform: uppercase; letter-spacing: 0.5px; font-size: 14px; white-space: nowrap; }

/* Style kart, kredytów etc. */
.ss-fortuna-scope .ss-card { background: rgba(0,0,0,.2); border: 1px solid var(--ss-fortuna-border-color); border-radius: 12px; color: var(--ss-fortuna-text-primary); margin-top: 16px; font-family: sans-serif; }
.ss-fortuna-scope .ss-card-title { padding: 10px 14px; border-bottom: 1px solid var(--ss-fortuna-border-color); color: #fff; font-weight: 700; font-size: 1.1em; }
.ss-fortuna-scope .ss-card-body { padding: 14px; }
.ss-fortuna-scope .ss-credits-panel .ss-credits-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.ss-fortuna-scope .ss-credits-msg { font-weight: bold; min-height: 1em; margin-top: 8px; }
.ss-fortuna-scope .ss-badge-pill { display: inline-block; background: #333; padding: 5px 10px; border-radius: 15px; margin: 2px; font-size: 0.9em; }
.ss-fortuna-scope .ss-card-body ul { list-style: none; padding: 0; margin: 0; }
.ss-fortuna-scope .ss-thumb-wrap{ position:relative; display:inline-block; }
.ss-fortuna-scope .ss-badges{ position:absolute; top:8px; left:8px; display:flex; gap:6px; z-index:3 }
.ss-fortuna-scope .ss-badge{ padding:5px 9px; border-radius:999px; font-size:12px; font-weight:800; color:#fff; box-shadow:0 2px 10px rgba(0,0,0,.35) }
.ss-fortuna-scope .ss-badge-featured{ background: #ffae00; }
/* === SS Fortuna labels minimal fix (v4) ===
   Cel: naprawić widoczność etykiet w klinach bez naruszania pozostałego wyglądu. */
.ss-fortuna-scope .ss-wof-slice-content span{
  /* Zamiast "right:10px; top:15%" kotwiczymy w środku górnej części klina */
  right: auto !important;
  left: 56% !important;    /* lekko w prawo od osi, żeby zmieścić litery */
  top: 22% !important;     /* nieco niżej, by wejść do wnętrza klina */
  transform-origin: center center !important;
  transform: translate(-50%,0) rotate(-90deg) !important; /* zachowujemy pionowy styl */
  z-index: 2 !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.6) !important;
  pointer-events: none !important;
  white-space: nowrap !important;
}
/* Wąskie kliny (dużo segmentów): minimalnie mniejszy font, by nie wychodził poza clip-path */
@media (max-width: 900px){
  .ss-fortuna-scope .ss-wof-slice-content span{ font-size: 12px !important; }
}
@media (max-width: 600px){
  .ss-fortuna-scope .ss-wof-slice-content span{ font-size: 11px !important; }
}

/* === SS Fortuna labels tweak (v5): lepsze centrowanie + ciut mniejszy font === */
.ss-fortuna-scope .ss-wof-slice-content span{
  left: 50% !important;
  top: 27% !important;
  transform: translate(-50%, -50%) rotate(-90deg) !important;
  letter-spacing: 0.3px !important;
  font-size: 12.5px !important;
}
@media (min-width: 1000px){
  .ss-fortuna-scope .ss-wof-slice-content span{ font-size: 12.75px !important; }
}
@media (min-width: 1300px){
  .ss-fortuna-scope .ss-wof-slice-content span{ font-size: 13px !important; }
}

/* === SS Fortuna hard-fix (labels visibility ensure) === */
.ss-fortuna-scope .ss-wof-slice-content span{
  z-index: 5 !important;
  opacity: 1 !important;
  visibility: visible !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.85) !important;
  pointer-events: none !important;
}

/* SSF var-driven labels */
.ss-fortuna-scope .ss-wof-slice-content span{
  left: var(--ssf-x, 50%) !important;
  top: var(--ssf-y, 27%) !important;
  font-size: var(--ssf-font-d, 13px) !important;
}
@media (max-width: 767px){
  .ss-fortuna-scope .ss-wof-slice-content span{ font-size: var(--ssf-font-m, 12px) !important; }
}

/* AI Boost badge fallback */
.ss-badge-ai{position:absolute;top:8px;left:8px;background:#8a4bff;color:#fff;font-size:11px;font-weight:600;padding:4px 6px;border-radius:3px;z-index:9;}

/* Welding‑style AI Boost badge */
.ss-badge-ai{
    position:absolute;
    bottom:8px;
    right:8px;
    background:linear-gradient(135deg,#1fd6cd 0%,#ff6600 100%);
    color:#ffffff;
    font-size:11px;
    font-weight:700;
    padding:4px 9px 4px 7px;
    border-radius:4px 0 4px 4px;
    box-shadow:0 2px 6px rgba(0,0,0,.25);
    display:flex;
    align-items:center;
    gap:4px;
}
.ss-badge-ai .ss-weld-icon{
    animation: ss-weld-spark 1.2s infinite ease-in-out;
}
@keyframes ss-weld-spark{
    0%,100%{transform:scale(.9) rotate(0deg);}
    50%{transform:scale(1.2) rotate(20deg);}
}

.ss-badge-ai{pointer-events:none;}

/* === Premium welding-style AI Boost label === */
.ss-badge-ai{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:linear-gradient(135deg,#444,#666);
    color:#ffb400;
    font-size:12px;
    font-weight:700;
    padding:4px 10px;
    border-radius:4px;
    letter-spacing:.5px;
    text-transform:uppercase;
    box-shadow:inset 0 1px 2px rgba(255,255,255,.25),0 2px 4px rgba(0,0,0,.5);
}
.ss-badge-ai::before,.ss-badge-ai::after{
    content:'';
    width:6px;height:6px;
    background:#ff6600;
    border-radius:50%;
    box-shadow:0 0 2px rgba(0,0,0,.8);
}
.ss-badge-ai::before{margin-left:-2px;}
.ss-badge-ai::after{margin-right:-2px;}
.ss-badge-ai .ss-weld-icon{
    animation:weld-spark 1.4s infinite ease-in-out;
}
@keyframes weld-spark{
    0%,100%{transform:scale(.9) rotate(0deg);}
    50%{transform:scale(1.25) rotate(25deg);}
}