/* JoyJoy HowTo: Gamey palette migration + dark-mode completion — 2026-08-31. */

/* Old editor v1 used orange for Gamey. Keep existing published content visually
   compatible while the editor migrates the stored attributes to the pink v6 palette. */
body[data-account-page="howto"] .howto-manual--gamey [data-howto-bg="#FFF7ED" i]{--howto-block-bg:#FFF1F7!important}
body[data-account-page="howto"] .howto-manual--gamey [data-howto-text="#3B2416" i]{--howto-block-text:#482033!important}
body[data-account-page="howto"] .howto-manual--gamey [data-howto-border="#FED7AA" i]{--howto-block-border:#F9B9D3!important}
body[data-account-page="howto"] .howto-manual--gamey [data-howto-accent="#FF7948" i]{--howto-block-accent:#E84D8A!important}

/* Gamey is pink throughout the public guide, not orange. */
body[data-account-page="howto"] .howto-manual--gamey{
  --manual-accent:#e84d8a;
  --manual-accent2:#ff8fbc;
  --manual-soft:rgba(232,77,138,.085);
  --manual-border:rgba(232,77,138,.24);
}
body[data-account-page="howto"] .howto-manual--gamey .howto-open-bot{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}

/* Complete dark treatment for both built-in and editor-authored HowTo blocks. */
:is(html[data-theme="dark"],html.dark) body[data-account-page="howto"] .howto-manual--gamey{
  --manual-soft:rgba(232,77,138,.115);
  --manual-border:rgba(255,143,188,.30);
}
:is(html[data-theme="dark"],html.dark) body[data-account-page="howto"] .howto-manual--gamey [data-howto-bg="#FFF7ED" i],
:is(html[data-theme="dark"],html.dark) body[data-account-page="howto"] .howto-manual--gamey [data-howto-bg="#FFF1F7" i]{
  --howto-block-bg:#2b1321!important;
}
:is(html[data-theme="dark"],html.dark) body[data-account-page="howto"] .howto-manual--gamey [data-howto-text="#3B2416" i],
:is(html[data-theme="dark"],html.dark) body[data-account-page="howto"] .howto-manual--gamey [data-howto-text="#482033" i]{
  --howto-block-text:#ffeaf4!important;
}
:is(html[data-theme="dark"],html.dark) body[data-account-page="howto"] .howto-manual--gamey [data-howto-border="#FED7AA" i],
:is(html[data-theme="dark"],html.dark) body[data-account-page="howto"] .howto-manual--gamey [data-howto-border="#F9B9D3" i]{
  --howto-block-border:#71415a!important;
}
:is(html[data-theme="dark"],html.dark) body[data-account-page="howto"] .howto-manual--gamey [data-howto-accent="#FF7948" i],
:is(html[data-theme="dark"],html.dark) body[data-account-page="howto"] .howto-manual--gamey [data-howto-accent="#E84D8A" i]{
  --howto-block-accent:#ff72aa!important;
}

:is(html[data-theme="dark"],html.dark) body[data-account-page="howto"] .howto-manual--gamey :is(
  .howto-step,.howto-module,.howto-details details,.howto-premium,.howto-note,
  .howto-rich-block,.howto-accordion,.howto-rich-grid--visible>.howto-rich-cell
){
  color:var(--howto-block-text,#ffeaf4)!important;
  border-color:var(--howto-block-border,rgba(255,143,188,.30))!important;
}
:is(html[data-theme="dark"],html.dark) body[data-account-page="howto"] .howto-manual--gamey :is(.howto-step,.howto-module){
  background:linear-gradient(135deg,rgba(232,77,138,.105),rgba(17,28,46,.96))!important;
  color:#f8edf3!important;
}
:is(html[data-theme="dark"],html.dark) body[data-account-page="howto"] .howto-manual--gamey :is(.howto-step,.howto-module) strong{
  color:#fff3f8!important;
  -webkit-text-fill-color:#fff3f8!important;
}
:is(html[data-theme="dark"],html.dark) body[data-account-page="howto"] .howto-manual--gamey :is(.howto-step,.howto-module) p{
  color:#b9c7d8!important;
  -webkit-text-fill-color:#b9c7d8!important;
}
:is(html[data-theme="dark"],html.dark) body[data-account-page="howto"] .howto-manual--gamey .howto-step::before{
  background:linear-gradient(135deg,#e84d8a,#ff8fbc)!important;
  color:#fff!important;
  box-shadow:0 7px 18px rgba(232,77,138,.24);
}
:is(html[data-theme="dark"],html.dark) body[data-account-page="howto"] .howto-manual--gamey .howto-details details{
  background:color-mix(in srgb,var(--account-surface,#111c2e) 93%,#e84d8a 7%)!important;
}
:is(html[data-theme="dark"],html.dark) body[data-account-page="howto"] .howto-manual--gamey .howto-details summary,
:is(html[data-theme="dark"],html.dark) body[data-account-page="howto"] .howto-manual--gamey .howto-rich-block :is(h2,h3,h4,strong),
:is(html[data-theme="dark"],html.dark) body[data-account-page="howto"] .howto-manual--gamey .howto-accordion-summary{
  color:#fff3f8!important;
  -webkit-text-fill-color:#fff3f8!important;
}
:is(html[data-theme="dark"],html.dark) body[data-account-page="howto"] .howto-manual--gamey :is(.howto-details-content,.howto-premium p,.howto-premium ul,.howto-note){
  color:#b9c7d8!important;
  -webkit-text-fill-color:#b9c7d8!important;
}
:is(html[data-theme="dark"],html.dark) body[data-account-page="howto"] .howto-manual--gamey :is(.howto-premium,.howto-note){
  background:linear-gradient(135deg,rgba(232,77,138,.12),rgba(17,28,46,.92))!important;
}
:is(html[data-theme="dark"],html.dark) body[data-account-page="howto"] .howto-manual--gamey .howto-bottom-actions a:not(:first-child){
  background:var(--account-surface-soft,#162338)!important;
  border-color:rgba(255,143,188,.28)!important;
  color:#f2dce7!important;
  -webkit-text-fill-color:#f2dce7!important;
}
:is(html[data-theme="dark"],html.dark) body[data-account-page="howto"] .howto-manual--gamey .howto-open-bot,
:is(html[data-theme="dark"],html.dark) body[data-account-page="howto"] .howto-manual--gamey .howto-bottom-actions a:first-child{
  background:linear-gradient(135deg,#e84d8a,#ff8fbc)!important;
  border-color:transparent!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}

/* Dark-mode editor controls that still had light hard-coded surfaces in v6. */
:is(html[data-theme="dark"],html.dark) body[data-account-page="howto"] :is(
  .howto-link-button-grid input,.howto-link-button-grid select,
  .howto-block-style-controls select,.howto-block-style-controls input[type="number"],
  .howto-accordion-toggle-options button,.joyjoy-editor-popover button
){
  background-color:var(--account-surface-soft,#162338)!important;
  border-color:var(--account-border,#2c405b)!important;
  color:var(--account-text,#eef6ff)!important;
  -webkit-text-fill-color:var(--account-text,#eef6ff)!important;
}
:is(html[data-theme="dark"],html.dark) body[data-account-page="howto"] .howto-accordion-toggle-control{
  background:color-mix(in srgb,var(--account-surface,#111c2e) 92%,#7357ff 8%)!important;
  border-color:var(--account-border,#2c405b)!important;
}
:is(html[data-theme="dark"],html.dark) body[data-account-page="howto"] .howto-accordion-toggle-control>span{
  color:var(--account-muted,#9eb0c4)!important;
}