/* ZIBADIS Entertain — visual consolidation
   Aligned to the Vitrail/Yottabyte reference while preserving Entertain identity. */

:root{
  --accent:#d23a7d;
  --accent2:#d23a7d;
  --ent-accent:#d23a7d;
  --ent-accent-soft:rgba(210,58,125,.09);
  --ent-accent-faint:rgba(210,58,125,.18);
  --bg:var(--paper);
  --bg-2:var(--paper2);
  --panel:var(--surface);
  --text:var(--ink);
  --muted-2:var(--muted);
  --line-2:var(--thin);
  --line-3:rgba(210,58,125,.34);
  --gold-2:#b77f12;
  color-scheme:light;
}

html{background:var(--paper)}
body{
  margin:0;
  background:var(--paper)!important;
  color:var(--ink)!important;
  font-family:var(--font-fa,"Yekan Bakh",Tahoma,sans-serif)!important;
  line-height:var(--lh-body,1.65)!important;
  min-height:100vh;
  isolation:isolate;
}
body::before{
  content:"";
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:
    linear-gradient(var(--faint) 1px,transparent 1px),
    linear-gradient(90deg,var(--faint) 1px,transparent 1px);
  background-size:56px 56px;
  opacity:.42;
}
body::after{
  content:"";
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(circle at 14% 8%,rgba(210,58,125,.075),transparent 28rem),
    radial-gradient(circle at 88% 26%,rgba(141,75,232,.055),transparent 31rem),
    radial-gradient(circle at 72% 88%,rgba(224,169,53,.055),transparent 26rem);
}

[data-theme="dark"]{
  --bg:var(--paper);
  --bg-2:var(--paper2);
  --panel:var(--surface);
  --text:var(--ink);
  --line-2:var(--thin);
  --line-3:rgba(232,228,220,.24);
  --ent-accent-soft:rgba(232,91,148,.10);
  color-scheme:dark;
}
[data-theme="dark"] body{background:var(--paper)!important;color:var(--ink)!important}

/* Prevent legacy app-grid rules from changing the global system. */
.eg-header,.eg-footer{font-family:inherit}
.rainbow-line{height:3px!important;margin:0!important;border:0!important}

/* Hero — reference hierarchy, Entertain accent. */
.eg-hero{
  position:relative;
  padding:58px 0 38px!important;
  border-bottom:2px solid var(--line);
  overflow:hidden;
  background:transparent!important;
}
.eg-hero-glow{
  width:360px!important;height:360px!important;
  top:-170px!important;right:auto!important;left:-90px!important;
  background:radial-gradient(circle,rgba(210,58,125,.11),transparent 68%)!important;
  opacity:.9;
}
[dir="rtl"] .eg-hero-glow{left:-90px!important;right:auto!important}
.eg-hero-mark{
  width:250px!important;
  top:-34px!important;
  right:auto!important;
  left:4%!important;
  color:var(--accent)!important;
  opacity:.055!important;
}
[dir="rtl"] .eg-hero-mark{right:auto!important;left:4%!important}
.eg-hero-inner{max-width:780px;margin-inline-start:auto}
.eg-eyebrow{
  margin:0 0 12px!important;
  color:var(--accent)!important;
  font-family:var(--font-en,"Montserrat",sans-serif)!important;
  font-size:.68rem!important;
  line-height:1.2!important;
  font-weight:700!important;
  letter-spacing:.15em!important;
  text-transform:uppercase;
}
.eg-hero h1{
  margin:0!important;
  font-size:clamp(2.15rem,5vw,4.2rem)!important;
  line-height:1.02!important;
  letter-spacing:-.045em!important;
  font-weight:900!important;
  color:var(--ink)!important;
}
[dir="rtl"] .eg-hero h1{letter-spacing:-.02em!important}
.eg-hero p:not(.eg-eyebrow){
  max-width:690px!important;
  margin:18px 0 0!important;
  color:var(--soft)!important;
  font-size:.94rem!important;
  line-height:1.95!important;
}

/* Homepage directory. */
.ent-directory-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:26px;
  padding:44px 0 18px;
}
.ent-directory-head h2{
  margin:0;
  font-size:clamp(1.55rem,2.8vw,2.55rem);
  line-height:1.08;
  letter-spacing:-.03em;
}
.ent-directory-head p{max-width:500px;margin:0;color:var(--soft);font-size:.84rem;line-height:1.8}
.ent-directory-head .eyebrow{margin-bottom:7px;color:var(--accent)}

.app-directory-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:14px!important;
  padding:0 0 26px!important;
}
.app-card{
  position:relative!important;
  display:grid!important;
  min-height:190px!important;
  aspect-ratio:auto!important;
  overflow:hidden!important;
  border:2px solid var(--border-card,var(--line))!important;
  background:var(--surface)!important;
  color:var(--ink)!important;
  text-decoration:none!important;
  transition:transform var(--dur-base,.24s),background var(--dur-base,.24s)!important;
}
.app-card::before{
  content:"";
  position:absolute;
  inset-inline-start:0;top:0;bottom:0;
  width:4px;
  background:linear-gradient(180deg,var(--accent) 0 36%,var(--violet) 36% 67%,var(--gold) 67%);
  opacity:.9;
  z-index:3;
}
.app-card::after{
  content:""!important;
  position:absolute!important;
  inset:auto -32px -52px auto!important;
  width:170px!important;height:170px!important;
  border:1px solid var(--faint)!important;
  transform:rotate(18deg)!important;
  background:transparent!important;
  opacity:.8!important;
  pointer-events:none!important;
}
.app-card:hover{transform:translateY(-3px)!important;background:var(--paper2)!important;border-color:var(--line)!important}
.app-card-bg{display:none!important}
.app-card-overlay{
  position:relative!important;
  inset:auto!important;
  z-index:2!important;
  max-width:none!important;
  min-height:100%!important;
  display:grid!important;
  grid-template-columns:48px 1fr!important;
  align-content:center!important;
  align-items:start!important;
  gap:16px!important;
  padding:28px 30px!important;
}
.app-card-icon{
  width:46px!important;height:46px!important;
  display:grid!important;place-items:center!important;
  margin:0!important;
  border:2px solid var(--line)!important;
  background:var(--paper2)!important;
  color:var(--ink)!important;
}
.app-card-icon svg{width:22px!important;height:22px!important;stroke-width:1.5}
.app-card-copy{display:grid!important;gap:7px!important;min-width:0!important;padding-top:1px}
.app-card-copy strong{
  color:var(--ink)!important;
  font-size:1.12rem!important;
  font-weight:800!important;
  line-height:1.25!important;
  letter-spacing:-.02em!important;
}
.app-card-copy small{
  color:var(--soft)!important;
  font-size:.80rem!important;
  line-height:1.85!important;
  display:block!important;
  overflow:visible!important;
  -webkit-line-clamp:unset!important;
}
.app-card-chip,.app-card-soon-badge{
  top:16px!important;
  inset-inline-end:16px!important;
  right:auto!important;
  z-index:4!important;
  padding:5px 8px!important;
  border:1px solid var(--thin)!important;
  background:var(--paper2)!important;
  color:var(--soft)!important;
  font-family:var(--font-en,"Montserrat",sans-serif)!important;
  font-size:.58rem!important;
  line-height:1!important;
  font-weight:700!important;
  letter-spacing:.10em!important;
}
.app-card-soon-badge{color:var(--accent)!important;border-color:var(--ent-accent-faint)!important}
.app-card.is-soon{opacity:1!important}
.app-card.is-soon .app-card-icon{color:var(--accent)!important;border-color:var(--ent-accent-faint)!important}

.ent-principles{
  padding:20px 0 60px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.ent-principle{
  position:relative;
  min-height:150px;
  padding:24px;
  border:2px solid var(--line);
  background:var(--surface);
}
.ent-principle::after{content:"";position:absolute;top:0;inset-inline-start:0;width:3px;height:44%;background:var(--accent)}
.ent-principle b{display:block;margin-bottom:8px;font-size:.98rem}
.ent-principle p{margin:0;color:var(--soft);font-size:.79rem;line-height:1.85}
.ent-principle .ent-num{display:block;margin-bottom:18px;color:var(--accent);font-family:var(--font-en,"Montserrat",sans-serif);font-size:.64rem;font-weight:700;letter-spacing:.12em}

/* Stub pages — turn unfinished pages into deliberate status pages. */
.stub-wrap{
  max-width:760px;
  padding:70px 0 90px!important;
  text-align:start!important;
}
.stub-wrap::before{
  content:"";
  display:block;
  width:72px;height:4px;
  margin-bottom:30px;
  background:linear-gradient(90deg,var(--accent),var(--violet),var(--gold));
}
.stub-icon{
  width:48px!important;height:48px!important;
  margin:0 0 22px!important;
  border:2px solid var(--line)!important;
  background:var(--paper2)!important;
  color:var(--ink)!important;
}
.stub-icon svg{width:22px!important;height:22px!important}
.stub-badge{
  display:inline-block!important;
  margin:0 0 14px!important;
  padding:5px 9px!important;
  border:1px solid var(--ent-accent-faint)!important;
  color:var(--accent)!important;
  background:var(--ent-accent-soft)!important;
  font-size:.62rem!important;
  font-weight:700!important;
  letter-spacing:.08em!important;
}
.stub-wrap h1{
  margin:0 0 14px!important;
  color:var(--ink)!important;
  font-size:clamp(2rem,4.5vw,3.9rem)!important;
  line-height:1.05!important;
  font-weight:900!important;
  letter-spacing:-.035em!important;
}
.stub-wrap p{
  max-width:650px!important;
  margin:0!important;
  color:var(--soft)!important;
  font-size:.93rem!important;
  line-height:2!important;
}

/* Unified studio — remove glass/rounded visual language from the old extension. */
.ext-studio{margin:0 auto 70px!important;padding-top:58px!important}
.ext-studio-head{padding-bottom:26px;margin-bottom:18px!important;border-bottom:2px solid var(--line)}
.ext-studio-head h1,.ext-studio-head h2{font-size:clamp(2rem,4.5vw,3.9rem)!important;font-weight:900!important;letter-spacing:-.035em!important}
.ext-studio-head p{max-width:680px;color:var(--soft)!important}
.ext-card,.ext-form,.ext-output,.ext-app-link,.ext-connect-group,.ext-network-card,.ext-bridge-inner{
  border:2px solid var(--line)!important;
  border-radius:0!important;
  background:var(--surface)!important;
  box-shadow:none!important;
}
.ext-card,.ext-form,.ext-output{padding:22px!important}
.ext-card p,.ext-studio-head p,.ext-network-head p,.ext-connect-head p,.ext-app-link span{color:var(--soft)!important}
.ext-field input,.ext-field textarea,.ext-field select{
  border:1px solid var(--thin)!important;
  border-radius:0!important;
  background:var(--paper2)!important;
  color:var(--ink)!important;
}
.ext-btn,.ext-output-links a,.ext-tag,.ext-arch-flow span,.ext-status{
  border-radius:0!important;
  border:1px solid var(--line)!important;
  background:var(--paper2)!important;
  color:var(--ink)!important;
}
.ext-btn.primary{background:var(--line)!important;color:var(--paper)!important}
.ext-flow-step b{border-radius:0!important;background:var(--ent-accent-soft)!important;color:var(--accent)!important}
.ext-output-body{border-radius:0!important;border-color:var(--thin)!important;background:var(--paper2)!important;color:var(--soft)!important}

/* Games & Hafez — override legacy dark tokens / rounded-less but mismatched rules. */
.games-tabs{gap:6px!important;margin:0 0 24px!important;border-bottom:2px solid var(--line);padding-bottom:10px}
.games-tab{
  border:1px solid transparent!important;
  background:transparent!important;
  color:var(--soft)!important;
  padding:9px 13px!important;
  font-family:inherit!important;
  font-weight:700!important;
}
.games-tab.active,.games-tab:hover{color:var(--accent)!important;border-color:var(--ent-accent-faint)!important;background:var(--ent-accent-soft)!important}
.ttt-cell,.sl-cell,.sl-die{
  border:1px solid var(--thin)!important;
  background:var(--paper2)!important;
  color:var(--ink)!important;
}
.ttt-cell:hover{border-color:var(--line)!important}
.ttt-status,.sl-status{color:var(--soft)!important}
.sl-cell.is-ladder{background:rgba(36,168,107,.09)!important;color:var(--green)!important}
.sl-cell.is-snake{background:rgba(211,67,53,.09)!important;color:var(--red)!important}
.games-tabs~.game-panel .btn,.fal-btn{
  border:2px solid var(--line)!important;
  background:var(--paper2)!important;
  color:var(--ink)!important;
  padding:11px 18px!important;
  font-family:inherit!important;
  font-weight:700!important;
}
.games-tabs~.game-panel .btn:hover,.fal-btn:hover{background:var(--line)!important;color:var(--paper)!important}
.fal-wrap{max-width:720px!important;padding:54px 0 90px!important}
.fal-intro{color:var(--soft)!important;font-size:.92rem!important}
.fal-card{
  margin-top:34px!important;
  padding:30px!important;
  border:2px solid var(--line)!important;
  background:var(--surface)!important;
}
.fal-verse{color:var(--ink)!important}
.fal-divider{background:var(--accent)!important;height:2px!important}
.fal-interp-label{color:var(--accent)!important;font-weight:700!important}
.fal-interp{color:var(--soft)!important}

/* Utility leftovers — keep square, reference-like geometry. */
#utilitySettings.utility-panel,#utilitySearch .utility-dialog,.contact-fab-menu{
  border-radius:0!important;
  border:2px solid var(--line)!important;
  background:var(--paper2)!important;
  color:var(--ink)!important;
}
#utilitySettings.utility-panel{box-shadow:0 14px 34px rgba(16,16,20,.12)!important}
.utility-action{border:1px solid var(--faint)!important;background:var(--paper)!important;color:var(--ink)!important}
.utility-action:hover{border-color:var(--thin)!important;background:var(--paper3)!important;color:var(--accent)!important}
.contact-fab-wrap .contact-fab{background:var(--line)!important;color:var(--paper)!important}

/* Footer breathing room. */
.site-links-footer{margin-top:8px}
.footer-divider{margin-top:0}

@media(max-width:900px){
  .ent-directory-head{align-items:start;flex-direction:column;gap:10px}
  .app-directory-grid{grid-template-columns:1fr!important}
  .ent-principles{grid-template-columns:1fr}
  .eg-hero-inner{max-width:100%}
}
@media(max-width:640px){
  .eg-hero{padding:42px 0 28px!important}
  .eg-hero-mark{width:190px!important;left:-30px!important}
  .eg-hero h1{font-size:clamp(2rem,11vw,3.1rem)!important}
  .eg-hero p:not(.eg-eyebrow){font-size:.88rem!important;line-height:1.85!important}
  .ent-directory-head{padding-top:34px}
  .app-card{min-height:176px!important}
  .app-card-overlay{grid-template-columns:42px 1fr!important;padding:24px 20px!important;gap:13px!important}
  .app-card-icon{width:42px!important;height:42px!important}
  .app-card-chip,.app-card-soon-badge{top:12px!important;inset-inline-end:12px!important}
  .stub-wrap{padding:48px 0 70px!important}
  .ttt-board{grid-template-columns:repeat(3,82px)!important;grid-template-rows:repeat(3,82px)!important}
  .sl-board{transform-origin:top center;max-width:100%}
}
@media(max-width:430px){
  .app-card-overlay{grid-template-columns:1fr!important;padding-top:46px!important}
  .app-card-copy strong{font-size:1.03rem!important}
  .sl-board{grid-template-columns:repeat(10,31px)!important;grid-template-rows:repeat(10,31px)!important}
}