*{margin:0;padding:0;box-sizing:border-box;}
:root{
  --sky1:#74b9ff; --sky2:#a29bfe; --ground:#55efc4;
  --math-a:#9B5DE5; --math-b:#c77dff;
  --eng-a:#006a95; --eng-b:#0077a3;
  --prob-a:#b55914; --prob-b:#c0581a;
  --civ-a:#2a9d8f; --civ-b:#2d6cdf;
  --geo-a:#2d8f5a; --geo-b:#2f6fdb;
  --sto-a:#8a5a44; --sto-b:#6d4cc9;
  --sci-a:#2a9d8f; --sci-b:#2b66d9;
  --ita-a:#d1495b; --ita-b:#3f6dd8;
  --sun:#ffd60a; --white:#fffdf7; --dark:#2d2d2d;
}
body{
  font-family:'Nunito',sans-serif;
  min-height:100vh;
  background:linear-gradient(170deg,var(--sky1) 0%,var(--sky2) 40%,#a8e6cf 75%,var(--ground) 100%);
  overflow-x:hidden;
  position:relative;
}

/* SUN */
.sun{
  position:fixed;top:-30px;right:60px;
  width:130px;height:130px;
  background:var(--sun);
  border-radius:50%;
  box-shadow:0 0 60px 20px rgba(255,214,10,.45);
  will-change:transform;
  z-index:0;
  animation:sunPulse 4s ease-in-out infinite;
}
@keyframes sunPulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.06);opacity:1}}

/* CLOUDS */
.cloud{
  position:fixed;
  background:white;
  border-radius:50px;
  opacity:.85;
  z-index:0;
  animation:cloudDrift linear infinite;
}
.cloud::before,.cloud::after{content:'';position:absolute;background:white;border-radius:50%;}
.cloud.c1{width:140px;height:45px;top:60px;left:-160px;animation-duration:28s;animation-delay:0s;}
.cloud.c1::before{width:70px;height:70px;top:-32px;left:20px;}
.cloud.c1::after{width:50px;height:50px;top:-22px;left:60px;}
.cloud.c2{width:100px;height:35px;top:100px;left:-120px;animation-duration:22s;animation-delay:-10s;}
.cloud.c2::before{width:55px;height:55px;top:-26px;left:12px;}
.cloud.c2::after{width:40px;height:40px;top:-18px;left:45px;}
.cloud.c3{width:120px;height:40px;top:140px;left:-140px;animation-duration:32s;animation-delay:-5s;}
.cloud.c3::before{width:60px;height:60px;top:-28px;left:18px;}
.cloud.c3::after{width:45px;height:45px;top:-20px;left:55px;}
@keyframes cloudDrift{from{transform:translateX(0)}to{transform:translateX(calc(100vw + 200px))}}

/* FLOATING ELEMENTS */
.float-el{
  position:fixed;font-size:1.8rem;
  animation:floatEl linear infinite;
  opacity:.35;z-index:0;
}
@keyframes floatEl{0%{transform:translateY(100vh) rotate(0deg);opacity:0}10%{opacity:.35}90%{opacity:.35}100%{transform:translateY(-10vh) rotate(360deg);opacity:0}}

/* HILLS */
.hills{
  position:fixed;bottom:0;left:0;width:100%;height:180px;
  background:linear-gradient(180deg,transparent 0%,#00b894 40%,#00a381 100%);
  clip-path:ellipse(60% 100% at 50% 100%);
  z-index:0;
}
.hills2{
  position:fixed;bottom:0;left:-10%;width:120%;height:140px;
  background:linear-gradient(180deg,transparent 0%,#00cec9 40%,#00b09b 100%);
  clip-path:ellipse(55% 100% at 45% 100%);
  z-index:0;opacity:.7;
}

/* WRAPPER */
.wrapper{
  position:relative;z-index:1;
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;
  padding:40px 20px 128px;
}

/* HEADER */
header{text-align:center;margin-bottom:48px;animation:bounceIn .9s cubic-bezier(.36,.07,.19,.97);}
@keyframes bounceIn{0%{transform:scale(0) rotate(-8deg);opacity:0}60%{transform:scale(1.08) rotate(2deg)}80%{transform:scale(.97)}100%{transform:scale(1);opacity:1}}

/* ===== MASCOTTE HOMEPAGE ===== */
.mascot-home{
  display:inline-block;
  width:1.35em;
  height:1em;
  margin:0 .08em 0 0;
  background-position:center;
  background-repeat:no-repeat;
  background-size:auto 1.84em;
  pointer-events:none;
  vertical-align:-.12em;
  animation:mascotHomeIn .7s cubic-bezier(.22,1,.36,1) .15s both;
}
.mascot-home[data-state="wave"]{
  background-image:url('assets/mascotte/cervellino-waving-03.png');
  background-image:image-set(
    url('assets/mascotte/cervellino-waving-03.avif') type("image/avif") 1x,
    url('assets/mascotte/cervellino-waving-03.webp') type("image/webp") 1x,
    url('assets/mascotte/cervellino-waving-03.png') type("image/png") 1x
  );
}
.mascot-home[data-state="celebrate"]{
  background-image:url('assets/mascotte/cervellino-celebrate.png');
  background-image:image-set(
    url('assets/mascotte/cervellino-celebrate.avif') type("image/avif") 1x,
    url('assets/mascotte/cervellino-celebrate.webp') type("image/webp") 1x,
    url('assets/mascotte/cervellino-celebrate.png') type("image/png") 1x
  );
}
.mascot-home[data-state="neutral"]{
  background-image:url('assets/mascotte/cervellino-neutral.png');
  background-image:image-set(
    url('assets/mascotte/cervellino-neutral.avif') type("image/avif") 1x,
    url('assets/mascotte/cervellino-neutral.webp') type("image/webp") 1x,
    url('assets/mascotte/cervellino-neutral.png') type("image/png") 1x
  );
}
.mascot-home[data-state="happy"]{
  background-image:url('assets/mascotte/cervellino-happy.png');
  background-image:image-set(
    url('assets/mascotte/cervellino-happy.avif') type("image/avif") 1x,
    url('assets/mascotte/cervellino-happy.webp') type("image/webp") 1x,
    url('assets/mascotte/cervellino-happy.png') type("image/png") 1x
  );
}
@keyframes mascotHomeIn{
  0%{transform:translateY(24px) scale(.7);opacity:0}
  60%{transform:translateY(-6px) scale(1.05);opacity:1}
  80%{transform:translateY(2px) scale(.98)}
  100%{transform:translateY(0) scale(1);opacity:1}
}
@keyframes mascotHomeIdle{
  0%,100%{transform:translateY(0) rotate(0deg)}
  30%{transform:translateY(-6px) rotate(-3deg)}
  70%{transform:translateY(-4px) rotate(3deg)}
}
.mascot-home.idle{animation:mascotHomeIdle 3s ease-in-out infinite;}

.badge{
  display:inline-block;
  background:white;border-radius:50px;
  padding:6px 20px;
  font-size:.85rem;font-weight:800;color:#7a3fc5;
  box-shadow:0 3px 12px rgba(0,0,0,.12);
  margin-bottom:12px;letter-spacing:1px;
}
.badge-row{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}
.faq-mini-link{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  background:#fff;
  border-radius:50px;
  padding:6px 14px;
  font-size:.85rem;
  font-weight:900;
  color:#2d6cdf;
  border:2px solid rgba(45,108,223,.2);
  box-shadow:0 3px 12px rgba(0,0,0,.12);
  margin-bottom:12px;
}
.faq-mini-link:hover{transform:translateY(-1px);}

.main-title{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:.04em;
  width:100%;
  font-family:'Fredoka One',cursive;
  font-size:clamp(2.8rem,8vw,4.5rem);
  color:white;
  text-shadow:3px 3px 0 rgba(0,0,0,.18),6px 6px 20px rgba(0,0,0,.12);
  line-height:1.1;letter-spacing:2px;
}
.main-title-text{
  grid-column:2;
  display:inline-block;
  min-width:0;
  text-align:center;
}
.main-title .mascot-home{
  grid-column:1;
  justify-self:end;
  align-self:center;
}
.main-sub{
  margin-top:0;
  font-size:1.1rem;font-weight:700;
  color:rgba(255,255,255,.85);
  text-shadow:1px 1px 4px rgba(0,0,0,.2);
}
.main-facts{
  margin-top:10px;
  display:inline-block;
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.3);
  border-radius:999px;
  padding:8px 14px;
  font-size:.88rem;
  font-weight:900;
  color:rgba(255,255,255,.98);
  line-height:1.35;
}

#contenuto-principale{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* CARDS */
.cards-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:24px;
  width:100%;
  max-width:980px;
  margin:0 auto;
}
@media(max-width:900px){
  .cards-row{
    grid-template-columns:repeat(2,minmax(220px,1fr));
    max-width:760px;
  }
}
@media(max-width:640px){
  .main-title{
    font-size:clamp(2.3rem,10vw,2.8rem);
  }
  .main-title .mascot-home{
    display:none;
  }
  .main-title-text{
    max-width:100%;
  }
  .cards-row{grid-template-columns:1fr;max-width:420px;}
}

.subject-card{
  border-radius:32px;
  padding:36px 24px 32px;
  text-align:center;
  cursor:pointer;
  transition:transform .2s,box-shadow .2s;
  position:relative;
  overflow:hidden;
  text-decoration:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  height:100%;
  min-height:440px;
  animation:cardIn .6s cubic-bezier(.36,.07,.19,.97) both;
}
.subject-card:nth-child(1){animation-delay:.1s;}
.subject-card:nth-child(2){animation-delay:.25s;}
.subject-card:nth-child(3){animation-delay:.4s;}
.subject-card:nth-child(4){animation-delay:.55s;}
@keyframes cardIn{from{transform:translateY(60px) scale(.9);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
.subject-card:hover{transform:translateY(-8px) scale(1.03);}
.subject-card:active{transform:scale(.97);}

.subject-card::before{
  content:'';position:absolute;
  top:-40px;right:-40px;
  width:160px;height:160px;border-radius:50%;
  background:rgba(255,255,255,.12);
}
.subject-card::after{
  content:'';position:absolute;
  bottom:-50px;left:-30px;
  width:180px;height:180px;border-radius:50%;
  background:rgba(0,0,0,.06);
}

/* Math card */
.card-math{
  background:linear-gradient(145deg,#9B5DE5,#c77dff);
  box-shadow:0 12px 40px rgba(155,93,229,.5),0 0 0 4px rgba(255,255,255,.3);
}
/* English card */
.card-english{
  background:linear-gradient(145deg,#005f85,#0077a3);
  box-shadow:0 12px 40px rgba(0,106,149,.5),0 0 0 4px rgba(255,255,255,.3);
}
/* Problems card */
.card-problems{
  background:linear-gradient(145deg,var(--prob-a),var(--prob-b));
  box-shadow:0 12px 40px rgba(255,123,84,.45),0 0 0 4px rgba(255,255,255,.3);
}
/* Civica card */
.card-civica{
  background:linear-gradient(145deg,var(--civ-a),var(--civ-b));
  box-shadow:0 12px 40px rgba(42,157,143,.42),0 0 0 4px rgba(255,255,255,.3);
}
.card-geografia{
  background:linear-gradient(145deg,var(--geo-a),var(--geo-b));
  box-shadow:0 12px 40px rgba(45,143,90,.42),0 0 0 4px rgba(255,255,255,.3);
}
.card-storia{
  background:linear-gradient(145deg,var(--sto-a),var(--sto-b));
  box-shadow:0 12px 40px rgba(138,90,68,.42),0 0 0 4px rgba(255,255,255,.3);
}
.card-scienze{
  background:linear-gradient(145deg,var(--sci-a),var(--sci-b));
  box-shadow:0 12px 40px rgba(42,157,143,.42),0 0 0 4px rgba(255,255,255,.3);
}
.card-italiano{
  background:linear-gradient(145deg,var(--ita-a),var(--ita-b));
  box-shadow:0 12px 40px rgba(209,73,91,.42),0 0 0 4px rgba(255,255,255,.3);
}

.card-icon{font-size:4rem;display:block;margin-bottom:12px;animation:iconBob 2.5s ease-in-out infinite;}
.card-icon.math-icon{animation-delay:0s;}
.card-icon.eng-icon{animation-delay:.4s;}
.subject-card:nth-child(3) .card-icon{animation-delay:.8s;}
.subject-card:nth-child(4) .card-icon{animation-delay:1.2s;}
.subject-card:nth-child(5) .card-icon{animation-delay:1.6s;}
.subject-card:nth-child(6) .card-icon{animation-delay:.2s;}
.subject-card:nth-child(7) .card-icon{animation-delay:1s;}
.subject-card:nth-child(8) .card-icon{animation-delay:1.4s;}
@keyframes iconBob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-8px) rotate(4deg)}}

.card-title{
  font-family:'Fredoka One',cursive;
  font-size:2rem;color:white;
  text-shadow:2px 2px 0 rgba(0,0,0,.15);
  margin-bottom:6px;
  min-height:2.4em;
  display:flex;
  align-items:center;
  justify-content:center;
}
.card-desc{
  font-size:.9rem;font-weight:700;
  color:rgba(255,255,255,.94);
  margin-bottom:14px;line-height:1.4;
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-shadow:0 1px 4px rgba(0,0,0,.4);
}
.card-tags{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  margin-bottom:16px;
  min-height:104px;
  justify-content:flex-start;
  width:100%;
}
.tag{
  background:rgba(0,0,0,.18);
  border-radius:50px;padding:6px 12px;
  font-size:.75rem;font-weight:800;
  color:rgba(255,255,255,.96);
  border:1px solid rgba(255,255,255,.25);
  width:100%;
  max-width:200px;
  line-height:1.2;
}
.card-btn{
  display:inline-block;
  background:white;
  border-radius:50px;
  padding:12px 32px;
  font-family:'Fredoka One',cursive;
  font-size:1.25rem;
  transition:all .15s;
  box-shadow:0 4px 0 rgba(0,0,0,.15);
  position:relative;z-index:1;
  margin-top:auto;
  align-self:center;
}
.card-math .card-btn{color:var(--math-a);}
.card-english .card-btn{color:var(--eng-a);}
.card-problems .card-btn{color:var(--prob-a);}
.card-civica .card-btn{color:var(--civ-a);}
.card-geografia .card-btn{color:var(--geo-a);}
.card-storia .card-btn{color:var(--sto-a);}
.card-scienze .card-btn{color:var(--sci-a);}
.card-italiano .card-btn{color:var(--ita-a);}
.card-btn:hover{transform:scale(1.05);}

.seo-home{
  width:100%;
  max-width:980px;
  margin:28px auto 0;
  padding:20px 18px;
  border-radius:24px;
  background:rgba(255,255,255,.92);
  border:2px solid rgba(91,93,145,.18);
  box-shadow:0 8px 20px rgba(0,0,0,.12);
  color:#243041;
  line-height:1.6;
}
.seo-home h2{
  font-family:'Fredoka One',cursive;
  font-size:1.28rem;
  line-height:1.3;
  margin-bottom:10px;
  color:#2d3b55;
}
.seo-home p{margin-bottom:10px;}
.seo-home ul{
  margin:0 0 10px 0;
  padding-left:20px;
}
.seo-home li + li{margin-top:6px;}
.seo-home a{
  color:#2f56d8;
  font-weight:900;
  text-decoration:none;
}
.seo-home a:hover{text-decoration:underline;}

/* Footer */
footer{
  position:fixed;bottom:0;left:0;width:100%;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(8px);
  border-top:1px solid rgba(0,0,0,.07);
  padding:10px 16px;
  display:flex;justify-content:center;gap:24px;
  flex-wrap:wrap;align-items:center;row-gap:8px;
  z-index:200;
}
.footer-link{min-width:44px;min-height:44px;padding:8px 4px;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;font-size:.8rem;font-weight:800;color:#5f6b7a;cursor:pointer;transition:color .2s;text-decoration:none;border:none;background:none;}
.footer-link:hover{color:var(--math-a);}
.footer-version{cursor:default;color:inherit;opacity:.95;}
.footer-support-cta{
  flex:0 0 auto;
  width:fit-content;
  max-width:calc(100% - 8px);
  margin: 0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:#FF3D00;
  color:#fff !important;
  border:none;
  border-radius:12px;
  padding:10px 20px;
  min-height:44px;
  font-size:.95rem;
  font-weight:900;
  text-decoration:none;
  box-shadow:0 4px 12px rgba(0,0,0,.18);
  transition:transform .15s, filter .15s;
}
.footer-support-cta:hover{transform:translateY(-1px);filter:brightness(1.05);}

/* Modal */
.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.45);z-index:500;display:none;align-items:center;justify-content:center;padding:16px;}
.modal-overlay.open{display:flex;}
.modal-box{background:white;border-radius:24px;width:100%;max-width:580px;max-height:85vh;overflow-y:auto;padding:28px 24px;position:relative;animation:modalIn .3s ease;box-shadow:0 12px 40px rgba(0,0,0,.2);}
@keyframes modalIn{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}
.modal-close{position:absolute;top:12px;right:12px;background:#f5f5f5;border:none;border-radius:50%;width:48px;height:48px;font-size:1.2rem;cursor:pointer;font-weight:800;color:#777;}
.modal-close:hover{background:#eee;color:#e74c3c;}
.modal-title{font-family:'Fredoka One',cursive;font-size:1.7rem;color:#2d2d2d;margin-bottom:4px;}
.modal-body{color:#555;font-size:.93rem;line-height:1.7;}
.modal-body h3{font-family:'Fredoka One',cursive;font-size:1.1rem;color:var(--math-a);margin:16px 0 6px;}
.modal-body p{margin-bottom:10px;}
.modal-body ul{padding-left:20px;margin-bottom:10px;}
.modal-body ul li{margin-bottom:4px;}
.modal-body a{color:var(--math-a);font-weight:700;text-decoration:none;}
.modal-body a:hover{text-decoration:underline;}

/* === ACCESSIBILITÀ === */
.skip-link{
  position:absolute;top:-100%;left:8px;
  background:#fff;color:#000;
  min-height:44px;
  padding:10px 18px;border-radius:6px;
  display:inline-flex;align-items:center;
  font-weight:800;font-size:1rem;z-index:9999;
  text-decoration:none;border:3px solid #000;
  transition:top .2s;
}
.skip-link:focus{top:8px;}
.sr-only{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
:focus-visible{
  outline:3px solid #0050ef;
  outline-offset:3px;
  border-radius:4px;
  box-shadow:0 0 0 5px rgba(0,80,239,.2);
}
.subject-card:focus-visible{
  outline:4px solid #fff;
  outline-offset:4px;
  box-shadow:none;
}
@media(max-width:640px){
  .subject-card{min-height:auto;}
  .card-title{min-height:auto;}
  .card-desc{min-height:auto;}
  .card-tags{min-height:auto;}
  .seo-home{
    padding:16px 14px;
    border-radius:18px;
  }
  .seo-home h2{font-size:1.12rem;}
}
@media (hover:none){
  .subject-card:hover{transform:none;}
  .card-btn:hover{transform:none;}
  .faq-mini-link:hover{transform:none;}
    .footer-support-cta:hover{transform:none;filter:none;}
}
html[data-motion="reduce"] *,
html[data-motion="reduce"] *::before,
html[data-motion="reduce"] *::after{
  animation-duration:.01ms!important;
  animation-iteration-count:1!important;
  transition-duration:.01ms!important;
  scroll-behavior:auto!important;
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* =========================================================================
   FASE 1 — Restyle Wada Sanzo. SOLO modalita standard, SOLO home.
   Guardia html:not([data-palette="okabe-ito"]) -> esclusa la modalita
   accessibile. Esclude .rewards-page (premi -> Fase 3) e le subject card
   (-> Fase 2). Consuma i token di tokens.css.
   ========================================================================= */

/* Sfondo home: carta crema calda (al posto del cielo azzurro) */
html:not([data-palette="okabe-ito"]) body:not(.rewards-page){
  background:linear-gradient(180deg,var(--ws-cartridge-buff) 0%,var(--ws-olive-buff) 100%);
}

/* Hero come pannello colorato: il titolo bianco resta leggibile su crema */
html:not([data-palette="okabe-ito"]) body:not(.rewards-page) header{
  max-width:780px;
  margin-left:auto;
  margin-right:auto;
  padding:26px 26px 28px;
  border-radius:var(--radius-lg);
  background:linear-gradient(135deg,var(--ws-verdigris),var(--ws-hortense-blue));
  box-shadow:var(--shadow-card),inset 0 0 0 3px rgba(255,255,255,.18);
}

/* Sole: giallo grano caldo */
html:not([data-palette="okabe-ito"]) body:not(.rewards-page) .sun{
  background:var(--ws-maize);
  box-shadow:0 0 60px 20px rgba(242,193,78,.42);
}

/* Colline: verdi Wada desaturati (stessa famiglia di Geografia) */
html:not([data-palette="okabe-ito"]) body:not(.rewards-page) .hills{
  background:linear-gradient(180deg,transparent 0%,var(--subj-geo-b) 40%,var(--subj-geo-a) 100%);
}
html:not([data-palette="okabe-ito"]) body:not(.rewards-page) .hills2{
  background:linear-gradient(180deg,transparent 0%,#79b58f 40%,#4f9b6f 100%);
}

/* Nuvole: bianco avorio caldo, un filo piu tenui sul fondo crema */
html:not([data-palette="okabe-ito"]) body:not(.rewards-page) .cloud{opacity:.7;}
html:not([data-palette="okabe-ito"]) body:not(.rewards-page) .cloud,
html:not([data-palette="okabe-ito"]) body:not(.rewards-page) .cloud::before,
html:not([data-palette="okabe-ito"]) body:not(.rewards-page) .cloud::after{
  background:var(--ws-ivory);
}

/* Box SEO: superficie avorio + bordo cannella + ombra calda */
html:not([data-palette="okabe-ito"]) body:not(.rewards-page) .seo-home{
  background:var(--ws-ivory);
  border-color:var(--ws-cinnamon-border);
  box-shadow:var(--shadow-card);
}
html:not([data-palette="okabe-ito"]) body:not(.rewards-page) .seo-home h2{
  color:var(--ws-slate-black);
}

/* Modale: superficie avorio + ombra calda */
html:not([data-palette="okabe-ito"]) body:not(.rewards-page) .modal-box{
  background:var(--ws-ivory);
  box-shadow:0 12px 40px rgba(44,42,40,.22);
}

/* Mobile: pannello hero piu compatto */
@media(max-width:640px){
  html:not([data-palette="okabe-ito"]) body:not(.rewards-page) header{
    max-width:100%;
    padding:20px 16px 22px;
    border-radius:var(--radius-md);
  }
}

/* =========================================================================
   FASE 2 — Home: card materie -> palette Wada Sanzo (solo standard).
   Le .card-btn usano i token --subj-*-a dal file tokens.css.
   Le shadow sono rgba dei valori hex corrispondenti.
   ========================================================================= */

html:not([data-palette="okabe-ito"]) .card-math{
  background:linear-gradient(145deg,var(--subj-math-a),var(--subj-math-b));
  box-shadow:0 12px 40px rgba(110,87,166,.45),0 0 0 4px rgba(255,255,255,.3);
}
html:not([data-palette="okabe-ito"]) .card-english{
  background:linear-gradient(145deg,var(--subj-eng-a),var(--subj-eng-b));
  box-shadow:0 12px 40px rgba(46,111,166,.45),0 0 0 4px rgba(255,255,255,.3);
}
html:not([data-palette="okabe-ito"]) .card-problems{
  background:linear-gradient(145deg,var(--subj-prob-a),var(--subj-prob-b));
  box-shadow:0 12px 40px rgba(217,116,63,.45),0 0 0 4px rgba(255,255,255,.3);
}
html:not([data-palette="okabe-ito"]) .card-civica{
  background:linear-gradient(145deg,var(--subj-civ-a),var(--subj-civ-b));
  box-shadow:0 12px 40px rgba(31,122,94,.42),0 0 0 4px rgba(255,255,255,.3);
}
html:not([data-palette="okabe-ito"]) .card-geografia{
  background:linear-gradient(145deg,var(--subj-geo-a),var(--subj-geo-b));
  box-shadow:0 12px 40px rgba(62,142,90,.42),0 0 0 4px rgba(255,255,255,.3);
}
html:not([data-palette="okabe-ito"]) .card-storia{
  background:linear-gradient(145deg,var(--subj-sto-a),var(--subj-sto-b));
  box-shadow:0 12px 40px rgba(154,106,67,.42),0 0 0 4px rgba(255,255,255,.3);
}
html:not([data-palette="okabe-ito"]) .card-scienze{
  background:linear-gradient(145deg,var(--subj-sci-a),var(--subj-sci-b));
  box-shadow:0 12px 40px rgba(44,140,134,.42),0 0 0 4px rgba(255,255,255,.3);
}
html:not([data-palette="okabe-ito"]) .card-italiano{
  background:linear-gradient(145deg,var(--subj-ita-a),var(--subj-ita-b));
  box-shadow:0 12px 40px rgba(194,74,91,.42),0 0 0 4px rgba(255,255,255,.3);
}

html:not([data-palette="okabe-ito"]) .card-math     .card-btn{color:var(--subj-math-a);}
html:not([data-palette="okabe-ito"]) .card-english  .card-btn{color:var(--subj-eng-a);}
html:not([data-palette="okabe-ito"]) .card-problems .card-btn{color:var(--subj-prob-a);}
html:not([data-palette="okabe-ito"]) .card-civica   .card-btn{color:var(--subj-civ-a);}
html:not([data-palette="okabe-ito"]) .card-geografia .card-btn{color:var(--subj-geo-a);}
html:not([data-palette="okabe-ito"]) .card-storia   .card-btn{color:var(--subj-sto-a);}
html:not([data-palette="okabe-ito"]) .card-scienze  .card-btn{color:var(--subj-sci-a);}
html:not([data-palette="okabe-ito"]) .card-italiano .card-btn{color:var(--subj-ita-a);}