/* ==================================================================
   skin.css - aduce UNELTELE REALE (games, maker) in look-ul homepage,
   FARA sa le atinga functionarea. Paleta e deja identica (--bg, --green-
   bright, --amber, --text...), asa ca schimbam doar imbracamintea:
   fundal plat + puncte albe, fonturile, butoanele, titlurile.
   Se incarca DUPA stilul propriu al paginii, deci castiga.
   ================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Titan+One&family=Nunito:wght@700;800&family=Patrick+Hand&display=swap');

/* fundal ca pe homepage: verde inchis plat + trama de puncte albe */
body{
  background:#0c130e !important;
  background-image:radial-gradient(rgba(255,255,255,.28) 1.2px, transparent 1.2px) !important;
  background-size:24px 24px !important;
  background-position:-12px -12px !important;
  background-attachment:scroll !important;
  font-family:Nunito,"Segoe UI",sans-serif !important;
  font-weight:700;
  overflow-x:hidden !important;
}

/* titlurile in fontul de display al homepage-ului */
h1,h2,h3,.title{
  font-family:"Titan One",Impact,sans-serif !important;
  font-weight:400 !important;
  -webkit-text-stroke:2px #0B0B0B; paint-order:stroke fill;
  letter-spacing:.3px;
}

/* butoanele: contur negru gros, colt rotunjit, crem/verde/amber - ca homepage.
   FONT LIZIBIL (Nunito), NU Titan One: pe butoanele mici din bara editorului
   fontul de titlu devine ilizibil. Titan One ramane doar pe titluri. */
.btn{
  font-family:Nunito,"Segoe UI",sans-serif !important;
  border:3px solid #0B0B0B !important;
  border-radius:10px !important;
  background:#F3EBD6 !important;
  color:#0B0B0B !important;
  box-shadow:none !important;
  font-weight:800 !important;
  letter-spacing:.2px;
}
.btn.primary{background:#8CF04A !important;color:#0B0B0B !important}
.btn.add{background:#fff !important}
/* toggle-urile (QR, stay green): CREM cand sunt oprite (nu stinse/gri),
   VERZI doar cand le activeaza utilizatorul */
.btn.tgl{opacity:1 !important;background:#F3EBD6 !important;color:#0B0B0B !important;
  border-color:#0B0B0B !important}
.btn.tgl.on{background:#8CF04A !important;color:#0B0B0B !important;border-color:#0B0B0B !important}
#undoBtn{opacity:1 !important}   /* Undo vizibil crem, nu stins */
.btn:hover{filter:brightness(1.05)}

/* bara originala a uneltei se ascunde; injectam nav-ul cu stickere de pe homepage */
.nav{display:none !important}
/* sticky + continut centrat (max-width) - butoanele stau pe mijloc cum erau.
   Un pseudo-element in spate da fundalul pe toata latimea, ca la scroll sa nu
   se vada continutul pe langa nav. */
.homenav{position:sticky;top:0;z-index:50;max-width:1120px;margin:0 auto;
  padding:14px 24px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:#0c130e}
.homenav::before{content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:100vw;background:#0c130e;box-shadow:0 4px 0 rgba(0,0,0,.30);z-index:-1}
.homenav .marca{font-family:"Titan One",Impact,sans-serif;font-size:34px;color:#8CF04A;
  -webkit-text-stroke:2.5px #0B0B0B;paint-order:stroke fill;text-decoration:none;
  transform:rotate(-2.5deg);margin-right:auto}
.homenav a.stk{display:inline-block;background:#F3EBD6;color:#0B0B0B;border:3px solid #0B0B0B;
  border-radius:999px;padding:6px 15px;font:800 14px/1 Nunito,sans-serif;text-decoration:none;
  transition:transform .12s ease}
.homenav a.stk.acum{background:#8CF04A}
.homenav a.stk:nth-of-type(2){transform:rotate(-2.5deg)}
.homenav a.stk:nth-of-type(4){transform:rotate(1.8deg)}
.homenav a.stk:nth-of-type(6){transform:rotate(-1.2deg)}
.homenav a.stk:nth-of-type(8){transform:rotate(2deg)}
.homenav a.stk:hover{transform:rotate(0) scale(1.06)}

/* panourile/cardurile capata conturul GROS homepage in loc de linia subtire.
   Include panourile reale ale editorului: text/tool/gallery. */
.panel,.card,.box,.tool,.section,
.textpanel,.toolpanel,.gallerypanel{
  border:3px solid #0B0B0B !important;
  border-radius:14px !important;
  box-shadow:0 10px 22px rgba(0,0,0,.35) !important;
}
/* panza editorului */
#cv{border:3px solid #0B0B0B !important;border-radius:14px !important}
/* pilulele de categorii (Base, Motion...) = stickere ca pe homepage */
.tab{
  background:#F3EBD6 !important;color:#0B0B0B !important;
  border:2px solid #0B0B0B !important;font-weight:800 !important;
}
.tab.on,.tab.active,.tab.sel,.tab[aria-selected="true"]{
  background:#8CF04A !important;color:#0B0B0B !important}
/* micile controale (swatch-uri, unelte) capata si ele contur negru clar */
.fsw,.tbtn,.pi,.csw,.sw{border-color:#0B0B0B !important}

/* Panoul de stickere sa ajunga la fel de jos ca planza (nu se mai termina
   devreme, lasand gol sub el). Doar align-self:stretch - NU atingem width,
   NU atingem .stage sau justify-content, ca sa nu se rupa cele 3 coloane. */
.gallerypanel{align-self:stretch !important;overflow-y:auto !important;overflow-x:hidden !important}

/* pe mockup (local) ascundem widget-ul Cloudflare Turnstile: nu se poate conecta
   pe localhost si arata caseta "Unable to connect". Pe site-ul real ramane. */
.cf-turnstile{display:none !important}


/* ---- arcade: cardurile colorate ca pe homepage (crem/verde/portocaliu) ---- */
.card:nth-of-type(1){background:#8CF04A !important}
.card:nth-of-type(2){background:#F3EBD6 !important}
.card:nth-of-type(3){background:#F2B33D !important}
.card:nth-of-type(4){background:#F3EBD6 !important}
.card h3{color:#fff !important}
.card p{color:#0B0B0B !important}
.card .thumb,.thumb.tp{background:rgba(0,0,0,.06) !important;color:#0B0B0B !important}
.card .play{border:3px solid #0B0B0B !important;background:#8CF04A !important;
  color:#0B0B0B !important;border-radius:10px !important;
  font-family:"Titan One",Impact,sans-serif !important;font-weight:400 !important}
.card .demo{border:2px solid #0B0B0B !important;color:#0B0B0B !important;
  background:rgba(0,0,0,.12) !important}

/* ---- cardul "more games / coming soon": MOV + Morphy pe el ---- */
.card.soon{background:#A970FF !important}
.card.soon .thumb{flex-direction:column !important;gap:4px;background:rgba(0,0,0,.06) !important;
  color:#0B0B0B !important;font-size:20px !important}
.card.soon .thumb .csimg{max-height:120px;width:auto;display:block}
.card.soon h3{color:#fff !important}
.card.soon p{color:#0B0B0B !important}
.card.soon .play.dis{border:3px solid #0B0B0B !important;background:rgba(255,255,255,.35) !important;
  color:#0B0B0B !important;border-radius:10px !important}

/* thumb-urile .tp (whack, long blob): imagine CONTAINED cu padding, fara overflow */
.card .thumb.tp{padding:14px !important;overflow:hidden}
.card .thumb.tp img{border-radius:0 !important;border:0 !important;height:auto !important;
  max-height:100% !important;width:auto !important;max-width:100% !important;object-fit:contain !important}
/* lottery: CERC verde (gif-ul are fundal negru; cercul il ascunde) */
.card .thumb:not(.tp):not(.s) img{border-radius:50% !important;height:130px !important;
  width:130px !important;object-fit:cover !important;border:4px solid #8CF04A !important}
.card .thumb{background:rgba(0,0,0,.06) !important}

/* LOWERCASE peste tot pe carduri/titluri (regula brandului) */
.card h3,.card p,.card .play,.card .thumb,.demo,.card .fn{text-transform:lowercase !important}
h1,h2,h3,.title,.fn,.leg{text-transform:lowercase !important}

/* coming-soon (mov): Morphy NU rotund (regula veche a arcade-ului ii punea cerc) */
.card .thumb.s img,.card .thumb.s .csimg{border-radius:0 !important;border:0 !important}

/* ===== arcade: TOATE thumb-urile la fel ca homepage (184px), personaj centrat
        si contained, fara overflow, fara gap - consistent pe toate cardurile ===== */
.card .thumb,.card .thumb.tp,.card .thumb.s{
  height:184px !important;padding:14px !important;overflow:hidden;
  display:flex !important;align-items:center !important;justify-content:center !important}
.card .thumb.tp img,.card .thumb.s img,.card .thumb.s .csimg{
  height:auto !important;max-height:100% !important;width:auto !important;
  max-width:100% !important;object-fit:contain !important;border-radius:0 !important;border:0 !important}
/* lottery ramane cerc verde, centrat */
.card .thumb:not(.tp):not(.s) img{border-radius:50% !important;height:136px !important;
  width:136px !important;object-fit:cover !important;border:4px solid #8CF04A !important;
  max-height:none !important;max-width:none !important}

/* demo in COLT (nu sub Morphy) + imaginile Morphy ALINIATE (aceeasi inaltime, centrate) */
.card .thumb{position:relative}
.card .demo{position:absolute !important;top:10px;right:10px;margin:0 !important;z-index:2}
.card .thumb.tp img,.card .thumb.s img,.card .thumb.s .csimg{
  height:150px !important;max-height:150px !important;width:auto !important;
  max-width:100% !important;object-fit:contain !important}

/* cartonasele arcade inclinate usor, ca pe homepage (hover le indreapta + ridica) */
.card{transition:transform .13s ease !important}
.card:nth-of-type(1){transform:rotate(-1.3deg)}
.card:nth-of-type(2){transform:rotate(1deg)}
.card:nth-of-type(3){transform:rotate(-.7deg)}
.card:nth-of-type(4),.card.soon{transform:rotate(1.4deg)}
.card:hover{transform:rotate(0) translateY(-5px) !important}

/* footer disclaimer standard pe paginile-unelte (ca pe paginile de continut) */
.mfoot{max-width:1120px;margin:60px auto 44px;padding:22px 24px 0;color:#93a99a;
  font-size:14px;text-align:center;border-top:1px solid #294034}

/* stickerele pe O SINGURA coloana, ca sa fie mai mari / mai vizibile */
.palette{grid-template-columns:1fr !important}

/* scrollbar SUBTIRE si tematic (in loc de cel gri urat) - panou stickere + carusele */
.gallerypanel,.krand,.crand{scrollbar-width:thin;scrollbar-color:#3a5a40 transparent}
.gallerypanel::-webkit-scrollbar{width:8px;height:8px}
.gallerypanel::-webkit-scrollbar-track{background:transparent}
.gallerypanel::-webkit-scrollbar-thumb{background:#3a5a40;border-radius:8px}
.gallerypanel::-webkit-scrollbar-thumb:hover{background:#5FB23A}