@charset "UTF-8";
/* ==========================================================================
   GeoPortal · styles.css
   Tot l'estil de la web viu aquí. Els HTML no tenen cap <style>.

   COM FUNCIONA
   - 1. PALETA: tots els colors de la web. Canvia'ls aquí i canvien a tot arreu.
   - 2. COMÚ: el que és igual a totes les pàgines (lletra, botó "Tornar", logo del peu…).
   - 3. PÀGINES: cada secció només afecta la pàgina que té aquella classe al <body>:
        .pg-portal    → portal (pàgina principal)
        .pg-bloc      → portal d'Europa i portal d'Espanya
        .pg-capitals  → països i capitals / províncies i capitals
        .pg-cap-eu    → ajustos propis de "Països i capitals d'Europa"
        .pg-joc-eu    → joc de mapa d'Europa
        .pg-joc-es    → joc de mapa d'Espanya
   ========================================================================== */


/* ==========================================================================
   1. PALETA
   Els colors amb "-rgb" són el mateix color escrit en números, per poder-lo
   fer servir amb transparència: rgba(var(--cyan-rgb), .3)
   Si canvies un color, canvia també el seu "-rgb" perquè quadrin.
   ========================================================================== */
:root{
  /* --- colors principals de la marca --- */
  --cyan:#2fe4ff;    --cyan-rgb:47,228,255;
  --blue:#4f8bff;    --blue-rgb:79,139,255;
  --purple:#b14bff;  --purple-rgb:177,75,255;

  /* --- colors d'estat --- */
  --green:#38f5b5;   --green-rgb:56,245,181;     /* correcte */
  --red:#ff5d7a;     --red-rgb:255,93,122;       /* incorrecte / restableix */
  --red-light:#ff8098;
  --amber:#ffcf6b;   --amber-rgb:255,207,107;    /* capitals revelades / solucions */
  --amber-deep:#ffb347;

  /* --- fons, panells i text --- */
  --bg:#05060e;
  --panel-rgb:18,24,46;
  --panel:rgba(var(--panel-rgb),.6);
  --panel-2:rgba(14,19,38,.72);
  --panel2:var(--panel-2);
  --line-rgb:120,160,255;
  --panel-border:rgba(var(--line-rgb),.22);
  --line:var(--panel-border);
  --input-rgb:8,12,26;                            /* fons dels quadres d'escriure */
  --popover-bg:#0d1327;                           /* desplegable de colors */
  --text:#eaf0ff;
  --muted:#8e97bd;
  --white:#fff;      --white-rgb:255,255,255;
  --shadow-rgb:0,0,0;

  /* --- text fosc sobre botons de colors --- */
  --on-accent:#04121f;
  --on-amber:#2a1b00;
  --on-red:#2a0008;

  /* --- mapes --- */
  --sea-top:#0b1d3a;
  --sea-bottom:#0a1526;
  --sand:#d8c08f;          /* països d'Europa */
  --sand-dark:#a98a52;
  --land-hover:#ecd9a8;
  --night-land:#223049;    /* països que no entren al joc */
  --night-land-line:#36476c;
  --border-soft-rgb:200,220,255;                  /* línia de les Canàries */
  --label-sol-eu:#8fd0ff;
  --label-sol-es:#cfe4ff;

  /* --- targeta "pròximament" --- */
  --soon-a:#555b7a;
  --soon-b:#3a4061;

  /* --- PDF imprimible --- */
  --print-bg:#fff;
  --print-ink:#1f2a24;
  --print-soft:#5a5338;
  --print-foot:#8a7f5f;
  --print-line:#d9cfb8;

  /* --- noms alternatius que fan servir els jocs de mapa --- */
  --ink:var(--text);
  --accent:var(--cyan);
  --accent-soft:rgba(var(--cyan-rgb),.14);
  --teal:var(--blue);
  --gold:var(--amber);
  --correct:var(--green);
  --correct-soft:rgba(var(--green-rgb),.16);
  --wrong:var(--red);
  --wrong-soft:rgba(var(--red-rgb),.16);
}


/* ==========================================================================
   2. COMÚ A TOTES LES PÀGINES
   ========================================================================== */
*{box-sizing:border-box}
body{font-family:"Helvetica Neue",Arial,sans-serif;color:var(--text)}

h1 .em{
  background:linear-gradient(90deg,var(--purple),var(--cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* botó "← Tornar" */
.portal-back{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-weight:700;font-size:.82rem;letter-spacing:.05em;padding:10px 18px;border-radius:9px;
  border:1px solid transparent;color:var(--on-accent);
  background:linear-gradient(90deg,var(--cyan),var(--blue));
  box-shadow:0 0 20px rgba(var(--cyan-rgb),.3);
  transition:opacity .15s ease,transform .1s ease}
.portal-back:hover{opacity:.9}
.portal-back:active{transform:translateY(1px)}

/* logo del peu de pàgina */
.foot-brand{height:20px;width:auto;display:block;margin:0 auto 10px;mix-blend-mode:screen}

/* nota petita de les taules ("Clica una capital per revelar-la") */
.hint{font-size:.8rem;color:var(--muted)}

/* nota del joc d'Espanya: color segons el resultat */
.grade.g-good{color:var(--green)}
.grade.g-mid{color:var(--amber)}
.grade.g-bad{color:var(--red)}


/* ==========================================================================
   3. PÀGINES
   ========================================================================== */


/* --------------------------------------------------------------------------
   PORTAL (pàgina principal) · .pg-portal
   -------------------------------------------------------------------------- */
  :where(.pg-portal){--panel:rgba(var(--panel-rgb),.55)}
  body:where(.pg-portal), :where(.pg-portal) *{margin:0;padding:0}
  body:where(.pg-portal){
    background:
      radial-gradient(circle at 18% 12%,rgba(var(--purple-rgb),.18) 0%,transparent 42%),
      radial-gradient(circle at 85% 20%,rgba(var(--cyan-rgb),.16) 0%,transparent 45%),
      radial-gradient(circle at 50% 110%,rgba(var(--blue-rgb),.20) 0%,transparent 55%),
      var(--bg);
    min-height:100vh;
    display:flex;flex-direction:column;justify-content:center;
    padding:48px 20px 80px;
    line-height:1.5;
    overflow-x:hidden;
  }
  /* subtil malla de fons */
  body:where(.pg-portal)::before{
    content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.35;
    background-image:
      linear-gradient(rgba(var(--line-rgb),.06) 1px,transparent 1px),
      linear-gradient(90deg,rgba(var(--line-rgb),.06) 1px,transparent 1px);
    background-size:46px 46px;
    mask-image:radial-gradient(circle at 50% 40%,#000 0%,transparent 75%);
    -webkit-mask-image:radial-gradient(circle at 50% 40%,#000 0%,transparent 75%);
  }
  :where(.pg-portal) .wrap{max-width:900px;margin:0 auto;width:100%;position:relative;z-index:1}

  :where(.pg-portal) header{text-align:center;margin-bottom:42px}
  :where(.pg-portal) .logo{
    width:clamp(130px,22vw,180px);height:auto;margin:0 auto 22px;display:block;
    border-radius:50%;
    filter:drop-shadow(0 0 22px rgba(var(--blue-rgb),.55)) drop-shadow(0 0 40px rgba(var(--purple-rgb),.35));
    animation:float 6s ease-in-out infinite;
  }
  @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
  :where(.pg-portal) .kicker{
    text-transform:uppercase;letter-spacing:.4em;
    font-size:.7rem;color:var(--cyan);font-weight:700;margin-bottom:16px;
    text-shadow:0 0 12px rgba(var(--cyan-rgb),.6);
  }
  :where(.pg-portal) h1{
    font-size:clamp(2rem,5.5vw,3.2rem);font-weight:800;line-height:1.1;
    letter-spacing:-.01em;
    text-shadow:0 0 24px rgba(var(--blue-rgb),.35);
  }
  :where(.pg-portal) .sub{margin-top:16px;color:var(--muted);font-size:1.08rem}
  :where(.pg-portal) .rule{height:2px;width:150px;margin:26px auto 0;border-radius:2px;
    background:linear-gradient(90deg,transparent,var(--purple),var(--cyan),transparent);
    box-shadow:0 0 14px rgba(var(--blue-rgb),.5)}

  :where(.pg-portal) .menu{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:10px}
  @media(max-width:620px){:where(.pg-portal) .menu{grid-template-columns:1fr}}

  :where(.pg-portal) .card{
    display:flex;flex-direction:column;position:relative;overflow:hidden;
    background:var(--panel);
    border:1px solid var(--panel-border);
    border-radius:18px;
    padding:34px 30px;
    text-decoration:none;color:inherit;
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
  }
  /* vora de llum superior */
  :where(.pg-portal) .card::before{
    content:"";position:absolute;top:0;left:0;right:0;height:3px;
    background:linear-gradient(90deg,var(--purple),var(--cyan));
    opacity:.9;
  }
  /* resplendor que apareix en hover */
  :where(.pg-portal) .card::after{
    content:"";position:absolute;inset:0;border-radius:18px;opacity:0;
    transition:opacity .25s ease;pointer-events:none;
    background:radial-gradient(circle at 50% 0%,rgba(var(--blue-rgb),.22),transparent 70%);
  }
  :where(.pg-portal) .card:hover{transform:translateY(-6px);border-color:rgba(var(--cyan-rgb),.55);
    box-shadow:0 20px 50px rgba(var(--shadow-rgb),.55),0 0 32px rgba(var(--blue-rgb),.28)}
  :where(.pg-portal) .card:hover::after{opacity:1}
  :where(.pg-portal) .ico{font-size:2.7rem;line-height:1;margin-bottom:16px;
    filter:drop-shadow(0 0 14px rgba(var(--cyan-rgb),.5))}
  :where(.pg-portal) .card h2{font-size:1.55rem;line-height:1.12;letter-spacing:-.01em;font-weight:700}
  :where(.pg-portal) .card p{color:var(--muted);font-size:.98rem;margin-top:10px;flex:1}
  :where(.pg-portal) .go{
    margin-top:22px;display:inline-flex;align-items:center;gap:8px;
    font-size:.78rem;text-transform:uppercase;letter-spacing:.16em;font-weight:700;
    color:var(--cyan);text-shadow:0 0 10px rgba(var(--cyan-rgb),.45);
  }
  :where(.pg-portal) .card:hover .go{gap:14px}

  /* targeta "pròximament" (desactivada) */
  :where(.pg-portal) .card.soon{opacity:.5;cursor:default;pointer-events:none;filter:grayscale(.3)}
  :where(.pg-portal) .card.soon::before{background:linear-gradient(90deg,var(--soon-a),var(--soon-b))}
  :where(.pg-portal) .card.soon .go{color:var(--muted);text-shadow:none}
  :where(.pg-portal) .badge-soon{
    position:absolute;top:18px;right:14px;
    font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.16em;
    color:var(--cyan);background:none;border:1.5px solid var(--cyan);border-radius:3px;
    padding:5px 11px;transform:rotate(-12deg);transform-origin:center;
    text-shadow:0 0 8px rgba(var(--cyan-rgb),.5);box-shadow:0 0 12px rgba(var(--cyan-rgb),.25);
  }

  :where(.pg-portal) footer{text-align:center;margin-top:48px;
    font-size:.76rem;letter-spacing:.1em;color:var(--muted)}
  :where(.pg-portal) .foot-brand{height:22px}


/* --------------------------------------------------------------------------
   PORTAL D'EUROPA I PORTAL D'ESPANYA · .pg-bloc
   -------------------------------------------------------------------------- */
  :where(.pg-bloc){--panel:rgba(var(--panel-rgb),.55)}
  body:where(.pg-bloc), :where(.pg-bloc) *{margin:0;padding:0}
  body:where(.pg-bloc){
    background:
      radial-gradient(circle at 18% 12%,rgba(var(--purple-rgb),.18) 0%,transparent 42%),
      radial-gradient(circle at 85% 20%,rgba(var(--cyan-rgb),.16) 0%,transparent 45%),
      radial-gradient(circle at 50% 110%,rgba(var(--blue-rgb),.20) 0%,transparent 55%),
      var(--bg);
    min-height:100vh;
    display:flex;flex-direction:column;justify-content:center;
    padding:48px 20px 80px;
    line-height:1.5;
    overflow-x:hidden;position:relative;
  }
  body:where(.pg-bloc)::before{
    content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.35;
    background-image:
      linear-gradient(rgba(var(--line-rgb),.06) 1px,transparent 1px),
      linear-gradient(90deg,rgba(var(--line-rgb),.06) 1px,transparent 1px);
    background-size:46px 46px;
    mask-image:radial-gradient(circle at 50% 40%,#000 0%,transparent 75%);
    -webkit-mask-image:radial-gradient(circle at 50% 40%,#000 0%,transparent 75%);
  }
  :where(.pg-bloc) .portalbar{position:absolute;top:24px;left:24px;z-index:2}

  :where(.pg-bloc) .wrap{max-width:860px;margin:0 auto;width:100%;position:relative;z-index:1}
  :where(.pg-bloc) header{text-align:center;margin-bottom:42px}
  :where(.pg-bloc) .kicker{
    text-transform:uppercase;letter-spacing:.4em;
    font-size:.7rem;color:var(--cyan);font-weight:700;margin-bottom:16px;
    text-shadow:0 0 12px rgba(var(--cyan-rgb),.6);
  }
  :where(.pg-bloc) h1{font-size:clamp(2rem,5.5vw,3.3rem);font-weight:800;line-height:1.1;letter-spacing:-.01em;
    text-shadow:0 0 24px rgba(var(--blue-rgb),.35)}
  :where(.pg-bloc) .sub{margin-top:14px;color:var(--muted);font-size:1.08rem}
  :where(.pg-bloc) .rule{height:2px;width:150px;margin:26px auto 0;border-radius:2px;
    background:linear-gradient(90deg,transparent,var(--purple),var(--cyan),transparent);
    box-shadow:0 0 14px rgba(var(--blue-rgb),.5)}

  :where(.pg-bloc) .menu{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:10px}
  @media(max-width:620px){:where(.pg-bloc) .menu{grid-template-columns:1fr}}

  :where(.pg-bloc) .card{
    display:flex;flex-direction:column;position:relative;overflow:hidden;
    background:var(--panel);border:1px solid var(--panel-border);border-radius:18px;
    padding:34px 30px;text-decoration:none;color:inherit;
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
  }
  :where(.pg-bloc) .card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
    background:linear-gradient(90deg,var(--purple),var(--cyan));opacity:.9}
  :where(.pg-bloc) .card::after{content:"";position:absolute;inset:0;border-radius:18px;opacity:0;
    transition:opacity .25s ease;pointer-events:none;
    background:radial-gradient(circle at 50% 0%,rgba(var(--blue-rgb),.22),transparent 70%)}
  :where(.pg-bloc) .card:hover{transform:translateY(-6px);border-color:rgba(var(--cyan-rgb),.55);
    box-shadow:0 20px 50px rgba(var(--shadow-rgb),.55),0 0 32px rgba(var(--blue-rgb),.28)}
  :where(.pg-bloc) .card:hover::after{opacity:1}
  :where(.pg-bloc) .ico{font-size:2.7rem;line-height:1;margin-bottom:16px;
    filter:drop-shadow(0 0 14px rgba(var(--cyan-rgb),.5))}
  :where(.pg-bloc) .card h2{font-size:1.55rem;line-height:1.12;letter-spacing:-.01em;font-weight:700}
  :where(.pg-bloc) .card p{color:var(--muted);font-size:.98rem;margin-top:10px;flex:1}
  :where(.pg-bloc) .go{margin-top:22px;display:inline-flex;align-items:center;gap:8px;
    font-size:.78rem;text-transform:uppercase;letter-spacing:.16em;font-weight:700;
    color:var(--cyan);text-shadow:0 0 10px rgba(var(--cyan-rgb),.45)}
  :where(.pg-bloc) .card:hover .go{gap:14px}

  :where(.pg-bloc) footer{text-align:center;margin-top:48px;font-size:.76rem;letter-spacing:.1em;color:var(--muted)}


/* --------------------------------------------------------------------------
   PAÏSOS I CAPITALS / PROVÍNCIES I CAPITALS · .pg-capitals
   -------------------------------------------------------------------------- */
  body:where(.pg-capitals), :where(.pg-capitals) *{margin:0;padding:0}
  body:where(.pg-capitals){
    background:
      radial-gradient(circle at 18% -8%,rgba(var(--purple-rgb),.16) 0%,transparent 44%),
      radial-gradient(circle at 90% 0%,rgba(var(--cyan-rgb),.14) 0%,transparent 42%),
      radial-gradient(circle at 50% 115%,rgba(var(--blue-rgb),.18) 0%,transparent 55%),
      var(--bg);
    min-height:100vh;
    padding:32px 20px 80px;
    line-height:1.5;
  }
  body:where(.pg-capitals)::before{
    content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.32;
    background-image:
      linear-gradient(rgba(var(--line-rgb),.06) 1px,transparent 1px),
      linear-gradient(90deg,rgba(var(--line-rgb),.06) 1px,transparent 1px);
    background-size:46px 46px;
    mask-image:radial-gradient(circle at 50% 30%,#000 0%,transparent 78%);
    -webkit-mask-image:radial-gradient(circle at 50% 30%,#000 0%,transparent 78%);
  }
  :where(.pg-capitals) .wrap{max-width:980px;margin:0 auto;position:relative;z-index:1}
  :where(.pg-capitals) header{text-align:center;margin-bottom:28px}
  :where(.pg-capitals) .kicker{
    text-transform:uppercase;letter-spacing:.32em;
    font-size:.72rem;color:var(--cyan);font-weight:700;
    margin-bottom:10px;text-shadow:0 0 12px rgba(var(--cyan-rgb),.55);
  }
  :where(.pg-capitals) h1{
    font-size:clamp(2rem,5vw,3.1rem);
    font-weight:800;line-height:1.05;letter-spacing:-.01em;
    text-shadow:0 0 24px rgba(var(--blue-rgb),.3);
  }
  :where(.pg-capitals) .sub{margin-top:10px;color:var(--muted);font-size:1.02rem}
  :where(.pg-capitals) .rule{height:2px;width:120px;margin:20px auto 0;border-radius:2px;
    background:linear-gradient(90deg,transparent,var(--purple),var(--cyan),transparent);
    box-shadow:0 0 14px rgba(var(--blue-rgb),.5)}

  /* ---- Home / mode picker ---- */
  :where(.pg-capitals) .menu{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:34px}
  @media(max-width:820px){:where(.pg-capitals) .menu{grid-template-columns:1fr 1fr}}
  @media(max-width:560px){:where(.pg-capitals) .menu{grid-template-columns:1fr}}
  :where(.pg-capitals) .card{
    background:var(--panel);
    border:1px solid var(--panel-border);
    border-radius:16px;
    padding:30px 26px;
    cursor:pointer;
    text-align:left;
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
    position:relative;overflow:hidden;
  }
  :where(.pg-capitals) .card:hover{transform:translateY(-4px);
    box-shadow:0 18px 40px rgba(var(--shadow-rgb),.5),0 0 28px rgba(var(--blue-rgb),.25);
    border-color:rgba(var(--cyan-rgb),.5)}
  :where(.pg-capitals) .card .num{
    font-weight:800;font-size:.8rem;letter-spacing:.2em;
    color:var(--cyan);text-shadow:0 0 10px rgba(var(--cyan-rgb),.4);
  }
  :where(.pg-capitals) .card h2{font-size:1.5rem;margin:10px 0 8px;line-height:1.1;color:var(--text)}
  :where(.pg-capitals) .card p{color:var(--muted);font-size:.98rem}
  :where(.pg-capitals) .card .go{
    margin-top:18px;display:inline-block;
    font-size:.8rem;text-transform:uppercase;letter-spacing:.14em;font-weight:700;
    color:var(--cyan);
  }
  :where(.pg-capitals) .card.study{border-top:4px solid var(--cyan)}
  :where(.pg-capitals) .card.quiz{border-top:4px solid var(--purple)}
  :where(.pg-capitals) .card.quiz3{border-top:4px solid var(--blue)}

  /* ---- shared view controls ---- */
  :where(.pg-capitals) .view{display:none}
  :where(.pg-capitals) .view.active{display:block}
  :where(.pg-capitals) .toolbar{
    display:flex;flex-wrap:wrap;align-items:center;gap:12px;
    margin:8px 0 22px;
  }
  :where(.pg-capitals) .toolbar .spacer{flex:1}
  :where(.pg-capitals) button.btn{
    font-family:inherit;
    font-weight:700;font-size:.82rem;letter-spacing:.05em;
    padding:10px 18px;border-radius:9px;cursor:pointer;
    border:1px solid var(--panel-border);
    background:rgba(var(--blue-rgb),.12);color:var(--text);
    transition:opacity .15s ease,transform .1s ease,box-shadow .15s ease,border-color .15s;
  }
  :where(.pg-capitals) button.btn:hover{border-color:rgba(var(--cyan-rgb),.55);box-shadow:0 0 18px rgba(var(--cyan-rgb),.22)}
  :where(.pg-capitals) button.btn:active{transform:translateY(1px)}
  :where(.pg-capitals) button.btn.ghost{background:transparent;color:var(--muted)}
  :where(.pg-capitals) button.btn.gold{
    background:linear-gradient(90deg,var(--cyan),var(--blue));
    border-color:transparent;color:var(--on-accent);font-weight:800;
    box-shadow:0 0 20px rgba(var(--cyan-rgb),.35)}
  :where(.pg-capitals) button.btn.forest{background:rgba(var(--blue-rgb),.9);border-color:transparent;color:var(--on-accent);font-weight:800}
  :where(.pg-capitals) .back{
    background:none;border:none;
    cursor:pointer;color:var(--cyan);font-weight:700;font-size:.85rem;
    letter-spacing:.04em;padding:6px 0;margin-bottom:6px;
  }
  :where(.pg-capitals) .back:hover{text-decoration:underline;text-shadow:0 0 10px rgba(var(--cyan-rgb),.5)}
  :where(.pg-capitals) .portalbar{margin-bottom:22px}


  /* ---- Study table ---- */
  :where(.pg-capitals) .tablewrap{background:var(--panel);border:1px solid var(--panel-border);border-radius:16px;
    overflow:hidden;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    box-shadow:0 10px 30px rgba(var(--shadow-rgb),.4)}
  :where(.pg-capitals) table{width:100%;border-collapse:collapse}
  :where(.pg-capitals) thead th{
    text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;
    color:var(--cyan);background:rgba(var(--cyan-rgb),.08);padding:14px 18px;text-align:left;
    border-bottom:1px solid var(--panel-border);text-shadow:0 0 10px rgba(var(--cyan-rgb),.35);
  }
  :where(.pg-capitals) thead th:last-child{color:var(--purple);background:rgba(var(--purple-rgb),.1);
    text-shadow:0 0 10px rgba(var(--purple-rgb),.35)}
  :where(.pg-capitals) tbody td{padding:11px 18px;border-top:1px solid rgba(var(--line-rgb),.12);font-size:1.02rem;color:var(--text)}
  :where(.pg-capitals) tbody tr:nth-child(even){background:rgba(var(--line-rgb),.045)}
  :where(.pg-capitals) .ccaa{color:var(--muted);font-size:.92rem}
  :where(.pg-capitals) .prov{font-weight:600}
  :where(.pg-capitals) .idx{color:var(--muted);
    font-size:.8rem;width:34px;text-align:right;padding-right:4px}
  :where(.pg-capitals) .cap-cell{cursor:pointer;user-select:none;position:relative}
  :where(.pg-capitals) .cap-cell .hidden-pill{
    display:inline-block;
    font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
    color:var(--cyan);border:1px dashed rgba(var(--cyan-rgb),.6);border-radius:20px;
    padding:4px 14px;background:rgba(var(--cyan-rgb),.06);transition:background .15s;
  }
  :where(.pg-capitals) .cap-cell:hover .hidden-pill{background:rgba(var(--cyan-rgb),.16)}
  :where(.pg-capitals) .cap-cell.revealed{color:var(--amber);font-weight:600;text-shadow:0 0 10px rgba(var(--amber-rgb),.35)}

  /* ---- Quiz ---- */
  :where(.pg-capitals) .quizcard{
    background:var(--panel);border:1px solid var(--panel-border);border-radius:18px;
    padding:34px 30px;text-align:center;max-width:640px;margin:0 auto;
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    box-shadow:0 14px 40px rgba(var(--shadow-rgb),.45),0 0 30px rgba(var(--blue-rgb),.12);
  }
  :where(.pg-capitals) .progress{font-size:.8rem;
    letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
  :where(.pg-capitals) .barback{height:6px;background:rgba(var(--line-rgb),.15);border-radius:6px;margin:14px auto 26px;
    max-width:420px;overflow:hidden}
  :where(.pg-capitals) .barfill{height:100%;background:linear-gradient(90deg,var(--purple),var(--cyan));
    width:0;transition:width .3s ease;box-shadow:0 0 12px rgba(var(--cyan-rgb),.5)}
  :where(.pg-capitals) .prompt-label{font-size:.78rem;
    letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);font-weight:700;
    text-shadow:0 0 10px rgba(var(--cyan-rgb),.4)}
  :where(.pg-capitals) .country-name{font-size:clamp(2rem,7vw,3rem);margin:8px 0 24px;line-height:1.05;font-weight:800}
  :where(.pg-capitals) .country-name .em{
    background:linear-gradient(90deg,var(--purple),var(--cyan));
    -webkit-background-clip:text;background-clip:text;color:transparent;}
  :where(.pg-capitals) .answer{
    font-family:inherit;font-size:1.35rem;
    text-align:center;padding:14px 16px;width:100%;max-width:420px;
    border:1px solid var(--panel-border);border-radius:10px;
    background:rgba(var(--input-rgb),.75);color:var(--text);
    outline:none;
  }
  :where(.pg-capitals) .answer::placeholder{color:var(--muted)}
  :where(.pg-capitals) .answer:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(var(--cyan-rgb),.18),0 0 18px rgba(var(--cyan-rgb),.25)}
  :where(.pg-capitals) .quiz-actions{margin-top:22px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
  :where(.pg-capitals) .feedback{min-height:70px;margin-top:22px}
  :where(.pg-capitals) .feedback .badge{
    font-weight:800;
    letter-spacing:.08em;text-transform:uppercase;font-size:.85rem;
    display:inline-block;padding:6px 16px;border-radius:20px;
  }
  :where(.pg-capitals) .feedback.ok .badge{background:rgba(var(--green-rgb),.14);color:var(--green);
    box-shadow:0 0 16px rgba(var(--green-rgb),.2)}
  :where(.pg-capitals) .feedback.no .badge{background:rgba(var(--red-rgb),.14);color:var(--red);
    box-shadow:0 0 16px rgba(var(--red-rgb),.2)}
  :where(.pg-capitals) .feedback .detail{margin-top:10px;font-size:1.1rem;color:var(--text)}
  :where(.pg-capitals) .feedback .detail .cap{font-weight:700;color:var(--amber);text-shadow:0 0 10px rgba(var(--amber-rgb),.35)}
  :where(.pg-capitals) .feedback .ccaatag{display:block;margin-top:4px;font-size:.86rem;color:var(--muted)}
  :where(.pg-capitals) .feedback .yours{color:var(--muted);font-size:.95rem;font-style:italic;margin-top:4px}

  :where(.pg-capitals) .scorebar{display:flex;gap:26px;justify-content:center;margin-bottom:18px}
  :where(.pg-capitals) .quiz-topbar{display:flex;align-items:center;justify-content:space-between;
    flex-wrap:wrap;gap:14px;margin-bottom:6px}
  :where(.pg-capitals) .quiz-topbar .scorebar{margin-bottom:0}
  :where(.pg-capitals) .randswitch{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
    font-size:.82rem;font-weight:700;
    letter-spacing:.06em;text-transform:uppercase;color:var(--cyan);
    background:var(--panel);border:1px solid var(--panel-border);border-radius:24px;
    padding:8px 16px;transition:border-color .15s}
  :where(.pg-capitals) .randswitch:hover{border-color:rgba(var(--cyan-rgb),.5)}
  :where(.pg-capitals) .randswitch input{width:16px;height:16px;accent-color:var(--cyan);cursor:pointer}
  :where(.pg-capitals) .scorebar div{font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
  :where(.pg-capitals) .scorebar b{display:block;
    font-size:1.7rem;letter-spacing:0;text-transform:none;margin-top:2px}
  :where(.pg-capitals) .scorebar .ok b{color:var(--green);text-shadow:0 0 12px rgba(var(--green-rgb),.4)}
  :where(.pg-capitals) .scorebar .no b{color:var(--red);text-shadow:0 0 12px rgba(var(--red-rgb),.4)}

  /* results */
  :where(.pg-capitals) .result{background:var(--panel);border:1px solid var(--panel-border);border-radius:18px;
    padding:40px 30px;text-align:center;max-width:640px;margin:0 auto;
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    box-shadow:0 14px 40px rgba(var(--shadow-rgb),.45)}
  :where(.pg-capitals) .result .big{font-size:4rem;line-height:1;margin:6px 0;font-weight:800;
    background:linear-gradient(90deg,var(--cyan),var(--blue));
    -webkit-background-clip:text;background-clip:text;color:transparent;}
  :where(.pg-capitals) .result .msg{font-style:italic;color:var(--muted);margin:6px 0 24px}
  :where(.pg-capitals) .misslist{text-align:left;max-width:460px;margin:20px auto 0}
  :where(.pg-capitals) .misssec{margin-top:24px}
  :where(.pg-capitals) .misssec:first-child{margin-top:0}
  :where(.pg-capitals) .misslist h3{font-size:.78rem;
    text-transform:uppercase;letter-spacing:.14em;color:var(--red);margin-bottom:10px}
  :where(.pg-capitals) .misslist h3.ok-good{color:var(--green)}
  :where(.pg-capitals) .misslist h3.na-none{color:var(--muted)}
  :where(.pg-capitals) .misslist .row{display:flex;justify-content:space-between;padding:7px 0;
    border-top:1px solid rgba(var(--line-rgb),.12);font-size:1rem}
  :where(.pg-capitals) .misslist .row .c{font-weight:700;color:var(--red)}
  :where(.pg-capitals) .misslist .row .c.ok-good{color:var(--green)}
  :where(.pg-capitals) .misslist .row .c.na-none{color:var(--muted)}

  /* ---- peu de pàgina ---- */
  :where(.pg-capitals) .site-foot{text-align:center;margin-top:40px;
    font-size:.75rem;letter-spacing:.08em;color:var(--muted)}

  /* ---- document imprimible (rèplica del PDF) ---- */
  :where(.pg-capitals) #print-doc{display:none}
  @media print{
    body:where(.pg-capitals), :where(.pg-capitals) *{-webkit-print-color-adjust:exact !important;print-color-adjust:exact !important}
    @page{margin:1.6cm}
    body:where(.pg-capitals),body:where(.pg-capitals){background:var(--print-bg) !important;padding:0 !important;margin:0 !important;
      min-height:0 !important;display:block !important;color:var(--print-ink) !important}
    body:where(.pg-capitals)::before,body:where(.pg-capitals)::after{display:none !important}
    body:where(.pg-capitals) > *{display:none !important}
    body:where(.pg-capitals) > #print-doc{display:block !important;margin:0;color:var(--print-ink);
      font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif}
    :where(.pg-capitals) #print-doc .pd-title{text-align:center;text-transform:uppercase;color:var(--print-ink);
      letter-spacing:.08em;font-size:19pt;font-weight:700;margin:0 0 16px;
      break-after:avoid;page-break-after:avoid}
    :where(.pg-capitals) #print-doc table{width:100%;border-collapse:collapse}
    :where(.pg-capitals) #print-doc thead{display:table-header-group}
    :where(.pg-capitals) #print-doc th{text-align:left;text-transform:uppercase;letter-spacing:.08em;color:var(--print-ink);
      font-family:"Helvetica Neue",Arial,sans-serif;font-size:9pt;
      padding:6px 10px;border-bottom:2px solid var(--print-ink)}
    :where(.pg-capitals) #print-doc td{padding:4px 10px;font-size:10.5pt;color:var(--print-ink);border-bottom:1px solid var(--print-line)}
    :where(.pg-capitals) #print-doc td.cap{font-weight:600}
    :where(.pg-capitals) #print-doc td.pcom{color:var(--print-soft)}
    :where(.pg-capitals) #print-doc tr{break-inside:avoid;page-break-inside:avoid}
    :where(.pg-capitals) #print-doc .pd-foot{text-align:center;margin-top:20px;
      font-family:"Helvetica Neue",Arial,sans-serif;font-size:8.5pt;
      letter-spacing:.1em;text-transform:uppercase;color:var(--print-foot)}
  }

  /* ---- Ajustos propis de "Països i capitals d'Europa" (la resta és a .pg-capitals) ---- */
  :where(.pg-cap-eu) .wrap{max-width:900px}
  :where(.pg-cap-eu) thead th{letter-spacing:.16em;padding:14px 20px}
  :where(.pg-cap-eu) tbody td{padding:12px 20px;font-size:1.05rem}
  :where(.pg-cap-eu) .country{font-weight:600}
  :where(.pg-cap-eu) .idx{width:38px}
  :where(.pg-cap-eu) .misslist{max-width:420px}
  :where(.pg-cap-eu) .brandmark{position:absolute;top:20px;right:24px;z-index:2}
  :where(.pg-cap-eu) .brandmark img{height:40px;width:40px;border-radius:50%;display:block;
    filter:drop-shadow(0 0 12px rgba(var(--blue-rgb),.45))}
  @media print{
    :where(.pg-cap-eu) #print-doc .pd-title{font-size:20pt}
    :where(.pg-cap-eu) #print-doc th{letter-spacing:.1em;font-size:9.5pt;padding:7px 12px}
    :where(.pg-cap-eu) #print-doc td{padding:5px 12px;font-size:11pt}
  }


/* --------------------------------------------------------------------------
   JOC DE MAPA D'EUROPA · .pg-joc-eu
   -------------------------------------------------------------------------- */
  :where(.pg-joc-eu){
    --land:var(--sand); --land-stroke:var(--sand-dark);
    --nontarget:var(--night-land); --nontarget-stroke:var(--night-land-line);
  }
  body:where(.pg-joc-eu),body:where(.pg-joc-eu){margin:0}
  body:where(.pg-joc-eu){
    background:
      radial-gradient(1200px 600px at 15% -10%, rgba(var(--purple-rgb),.16) 0%, rgba(var(--purple-rgb),0) 60%),
      radial-gradient(1000px 700px at 110% 20%, rgba(var(--cyan-rgb),.14) 0%, rgba(var(--cyan-rgb),0) 55%),
      radial-gradient(900px 700px at 50% 120%, rgba(var(--blue-rgb),.18) 0%, rgba(var(--blue-rgb),0) 55%),
      var(--bg);
    padding:22px 22px 40px;
    min-height:100vh;
  }
  :where(.pg-joc-eu) .portal-back{margin-bottom:14px}
  :where(.pg-joc-eu) header{max-width:1680px; margin:0 auto 16px}
  :where(.pg-joc-eu) h1{ font-family:"Helvetica Neue",Arial,sans-serif; font-weight:800; font-size:clamp(24px,3.4vw,38px);
    letter-spacing:.3px; margin:0 0 6px; color:var(--ink); text-shadow:0 0 22px rgba(var(--blue-rgb),.3); }
  :where(.pg-joc-eu) h1 .dot{color:var(--accent)}
  :where(.pg-joc-eu) .lede{margin:0; color:var(--muted); font-size:15px; max-width:760px; line-height:1.5}
  :where(.pg-joc-eu) .steps{display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:10px; font-size:13.5px; color:var(--teal)}
  :where(.pg-joc-eu) .steps b{color:var(--accent); font-weight:800; margin-right:4px}
  :where(.pg-joc-eu) .wrap{max-width:1680px; margin:0 auto;
    display:grid; grid-template-columns: minmax(0,1fr) 300px; gap:18px; align-items:start}
  @media (max-width:880px){ :where(.pg-joc-eu) .wrap{grid-template-columns:1fr} }
  :where(.pg-joc-eu) .card{background:var(--panel); border:1px solid var(--line);
    border-radius:16px; backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    box-shadow:0 14px 40px rgba(var(--shadow-rgb),.45)}
  :where(.pg-joc-eu) .toolbar{grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:10px;
    padding:12px 14px; margin-bottom:2px}
  :where(.pg-joc-eu) .sel{display:flex; align-items:center; gap:8px; font-size:14px; color:var(--muted);
    padding:7px 12px; background:var(--panel2); border:1px dashed var(--land-stroke); border-radius:999px}
  :where(.pg-joc-eu) .sel .name{font-weight:700; color:var(--accent); font-size:15px}
  :where(.pg-joc-eu) .sel.none .name{color:var(--muted); font-weight:600}
  :where(.pg-joc-eu) .spacer{flex:1}
  :where(.pg-joc-eu) button.act{ font-family:inherit; font-size:14px; font-weight:700; cursor:pointer;
    border-radius:11px; padding:10px 16px; border:1px solid transparent; transition:.15s; color:var(--on-accent); }
  :where(.pg-joc-eu) button.act:active{transform:translateY(1px)}
  :where(.pg-joc-eu) .b-check{background:linear-gradient(90deg,var(--green),var(--cyan)); box-shadow:0 0 18px rgba(var(--green-rgb),.3)}
  :where(.pg-joc-eu) .b-check:hover{opacity:.9}
  :where(.pg-joc-eu) .b-sol{background:linear-gradient(90deg,var(--amber),var(--amber-deep)); color:var(--on-amber)}
  :where(.pg-joc-eu) .b-sol:hover{opacity:.9}
  :where(.pg-joc-eu) .b-reset{background:linear-gradient(90deg,var(--red),var(--red-light)); color:var(--on-red); box-shadow:0 0 18px rgba(var(--red-rgb),.35)}
  :where(.pg-joc-eu) .b-reset:hover{opacity:.9}
  :where(.pg-joc-eu) .mapcard{padding:10px; position:relative}
  :where(.pg-joc-eu) .zoomctl{position:absolute; top:20px; right:20px; display:flex; flex-direction:column; gap:6px; z-index:5}
  :where(.pg-joc-eu) .zoomctl button{width:40px; height:40px; border-radius:11px; border:1px solid var(--line);
    background:var(--panel2); color:var(--ink); font-size:22px; font-weight:700; cursor:pointer;
    box-shadow:0 4px 12px -6px rgba(var(--shadow-rgb),.6); font-family:inherit; line-height:1; padding:0}
  :where(.pg-joc-eu) .zoomctl button:hover{background:rgba(var(--cyan-rgb),.14); border-color:rgba(var(--cyan-rgb),.5)}
  :where(.pg-joc-eu) .zoomctl .rst{font-size:12px; font-weight:700}
  :where(.pg-joc-eu) svg#map{width:100%; height:auto; display:block; border-radius:10px; cursor:grab; touch-action:none;
    background:linear-gradient(180deg,var(--sea-top),var(--sea-bottom)); overflow:hidden}
  :where(.pg-joc-eu) svg#map.grabbing{cursor:grabbing}
  :where(.pg-joc-eu) .land{fill:var(--land); stroke:var(--land-stroke); stroke-width:.6; stroke-linejoin:round}
  :where(.pg-joc-eu) .target{cursor:pointer; transition:fill .12s}
  :where(.pg-joc-eu) .target:hover{fill:var(--land-hover)}
  :where(.pg-joc-eu) .target.placed{fill:var(--gold)}
  :where(.pg-joc-eu) .target.correct{fill:var(--correct)}
  :where(.pg-joc-eu) .target.wrong{fill:var(--wrong)}
  :where(.pg-joc-eu) .nontarget{fill:var(--nontarget); stroke:var(--nontarget-stroke); stroke-width:.5; pointer-events:none}
  :where(.pg-joc-eu) .hit{fill:transparent; cursor:pointer}
  :where(.pg-joc-eu) .micro-dot{fill:var(--amber); stroke:var(--bg); stroke-width:.8; pointer-events:none}
  :where(.pg-joc-eu) .lbl{font-family:system-ui,sans-serif; font-weight:700; text-anchor:middle;
    paint-order:stroke; stroke:var(--bg); stroke-width:3px; stroke-linejoin:round; pointer-events:none}
  :where(.pg-joc-eu) .lbl.place{fill:var(--amber); font-size:15px}
  :where(.pg-joc-eu) .lbl.ok{fill:var(--green)}
  :where(.pg-joc-eu) .lbl.no{fill:var(--red-light)}
  :where(.pg-joc-eu) .lbl.sol{fill:var(--label-sol-eu); font-size:14px; stroke-width:3.2px}
  :where(.pg-joc-eu) #score{grid-column:1 / -1; display:none; padding:14px 16px; border-radius:14px;
    font-size:15px; align-items:center; gap:14px; border:1px solid var(--line)}
  :where(.pg-joc-eu) #score.show{display:flex; flex-wrap:wrap}
  :where(.pg-joc-eu) #score .grade{font-size:30px; font-weight:800; line-height:1}
  :where(.pg-joc-eu) #score .g-wrap{display:flex; align-items:baseline; gap:6px}
  :where(.pg-joc-eu) #score .g-max{color:var(--muted); font-size:16px}
  :where(.pg-joc-eu) #score .detail{color:var(--ink)}
  :where(.pg-joc-eu) #score .pill{padding:3px 10px; border-radius:999px; font-weight:600; font-size:13px}
  :where(.pg-joc-eu) #score .pill.c{background:var(--correct-soft); color:var(--green)}
  :where(.pg-joc-eu) #score .pill.w{background:var(--wrong-soft); color:var(--red)}
  :where(.pg-joc-eu) #score.good{background:linear-gradient(90deg,rgba(var(--green-rgb),.14),rgba(var(--cyan-rgb),.08))}
  :where(.pg-joc-eu) #score.mid{background:linear-gradient(90deg,rgba(var(--amber-rgb),.14),rgba(var(--blue-rgb),.06))}
  :where(.pg-joc-eu) #score.info{background:var(--panel2)}
  :where(.pg-joc-eu) .listcard{padding:12px; position:sticky; top:14px}
  :where(.pg-joc-eu) .list-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
  :where(.pg-joc-eu) .list-head h2{font-size:17px; margin:0; font-weight:800}
  :where(.pg-joc-eu) .counter{font-size:12.5px; color:var(--muted); background:var(--panel2);
    border:1px solid var(--line); padding:3px 9px; border-radius:999px}
  :where(.pg-joc-eu) input#filter{width:100%; font-family:inherit; font-size:14px; padding:9px 12px; margin-bottom:8px;
    border:1px solid var(--line); border-radius:10px; background:rgba(var(--input-rgb),.75); color:var(--ink)}
  :where(.pg-joc-eu) input#filter::placeholder{color:var(--muted)}
  :where(.pg-joc-eu) .list{max-height:70vh; overflow:auto; padding-right:4px}
  :where(.pg-joc-eu) .list::-webkit-scrollbar{width:9px}
  :where(.pg-joc-eu) .list::-webkit-scrollbar-thumb{background:rgba(var(--line-rgb),.35); border-radius:6px}
  :where(.pg-joc-eu) .item{display:flex; align-items:center; justify-content:space-between; gap:8px;
    padding:8px 11px; border-radius:10px; cursor:pointer; border:1px solid transparent; margin-bottom:3px}
  :where(.pg-joc-eu) .item:hover{background:var(--panel2)}
  :where(.pg-joc-eu) .item .txt{display:flex; flex-direction:column; line-height:1.15}
  :where(.pg-joc-eu) .item .cn{font-weight:600; font-size:14.5px}
  :where(.pg-joc-eu) .item .cap{font-size:11.5px; color:var(--muted)}
  :where(.pg-joc-eu) .item.selected{background:var(--accent-soft); border-color:var(--accent)}
  :where(.pg-joc-eu) .item.selected .cn{color:var(--accent)}
  :where(.pg-joc-eu) .item.done{opacity:.45}
  :where(.pg-joc-eu) .item.done .cn{text-decoration:line-through}
  :where(.pg-joc-eu) .item .tag{font-size:11px; color:var(--teal); white-space:nowrap}
  :where(.pg-joc-eu) .item.done .tag{color:var(--muted)}
  :where(.pg-joc-eu) .item .right{display:flex; align-items:center; gap:7px; flex:none}
  :where(.pg-joc-eu) .eye{display:flex; align-items:center; justify-content:center; width:30px; height:30px; padding:0;
    border:1px solid var(--line); border-radius:8px; background:var(--panel2); color:var(--muted);
    cursor:pointer; flex:none; transition:.12s}
  :where(.pg-joc-eu) .eye:hover{background:rgba(var(--cyan-rgb),.14); color:var(--ink)}
  :where(.pg-joc-eu) .eye.on{background:var(--teal); border-color:var(--teal); color:var(--on-accent)}
  :where(.pg-joc-eu) #loading{padding:40px; text-align:center; color:var(--muted); font-size:15px}
  :where(.pg-joc-eu) footer{max-width:1680px; margin:16px auto 0; font-size:12px; color:var(--muted); text-align:center}
  :where(.pg-joc-eu) .foot-brand{height:18px;margin:0 auto 8px}
  :where(.pg-joc-eu) .brandmark{position:absolute;top:22px;right:22px;z-index:6}
  :where(.pg-joc-eu) .brandmark img{height:40px;width:40px;border-radius:50%;display:block;
    filter:drop-shadow(0 0 12px rgba(var(--blue-rgb),.45))}


/* --------------------------------------------------------------------------
   JOC DE MAPA D'ESPANYA · .pg-joc-es
   -------------------------------------------------------------------------- */
  :where(.pg-joc-es){--land-stroke:var(--sea-bottom)}
  body:where(.pg-joc-es),body:where(.pg-joc-es){margin:0}
  body:where(.pg-joc-es){
    background:
      radial-gradient(1200px 600px at 15% -10%, rgba(var(--purple-rgb),.16) 0%, rgba(var(--purple-rgb),0) 60%),
      radial-gradient(1000px 700px at 110% 20%, rgba(var(--cyan-rgb),.14) 0%, rgba(var(--cyan-rgb),0) 55%),
      radial-gradient(900px 700px at 50% 120%, rgba(var(--blue-rgb),.18) 0%, rgba(var(--blue-rgb),0) 55%),
      var(--bg);
    padding:22px 22px 60px;
    min-height:100vh;
  }
  :where(.pg-joc-es) .portal-back{margin-bottom:14px}
  :where(.pg-joc-es) header{max-width:1680px; margin:0 auto 16px}
  :where(.pg-joc-es) h1{ font-family:"Helvetica Neue",Arial,sans-serif; font-weight:800; font-size:clamp(22px,3.2vw,36px);
    letter-spacing:.3px; margin:0 0 6px; color:var(--ink); text-shadow:0 0 22px rgba(var(--blue-rgb),.3); }
  :where(.pg-joc-es) h1 .dot{color:var(--accent)}
  :where(.pg-joc-es) .lede{margin:0; color:var(--muted); font-size:15px; max-width:820px; line-height:1.5}
  :where(.pg-joc-es) .steps{display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:10px; font-size:13.5px; color:var(--teal)}
  :where(.pg-joc-es) .steps b{color:var(--accent); font-weight:800; margin-right:4px}
  :where(.pg-joc-es) .wrap{max-width:1680px; margin:0 auto;
    display:grid; grid-template-columns: minmax(0,1fr) 340px; gap:18px; align-items:start}
  @media (max-width:980px){ :where(.pg-joc-es) .wrap{grid-template-columns:1fr} }
  :where(.pg-joc-es) .card{background:var(--panel); border:1px solid var(--line);
    border-radius:16px; backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    box-shadow:0 14px 40px rgba(var(--shadow-rgb),.45)}
  :where(.pg-joc-es) .toolbar{grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:10px;
    padding:12px 14px; margin-bottom:2px}
  :where(.pg-joc-es) .sel{display:flex; align-items:center; gap:8px; font-size:14px; color:var(--muted);
    padding:7px 12px; background:var(--panel2); border:1px dashed var(--teal); border-radius:999px}
  :where(.pg-joc-es) .sel .name{font-weight:700; color:var(--accent); font-size:15px}
  :where(.pg-joc-es) .sel.none .name{color:var(--muted); font-weight:600}
  :where(.pg-joc-es) .spacer{flex:1}
  :where(.pg-joc-es) button.act{ font-family:inherit; font-size:14px; font-weight:700; cursor:pointer;
    border-radius:11px; padding:10px 16px; border:1px solid transparent; transition:.15s; color:var(--on-accent); }
  :where(.pg-joc-es) button.act:active{transform:translateY(1px)}
  :where(.pg-joc-es) .b-check{background:linear-gradient(90deg,var(--green),var(--cyan)); box-shadow:0 0 18px rgba(var(--green-rgb),.3)}
  :where(.pg-joc-es) .b-check:hover{opacity:.9}
  :where(.pg-joc-es) .b-sol{background:linear-gradient(90deg,var(--amber),var(--amber-deep)); color:var(--on-amber)}
  :where(.pg-joc-es) .b-sol:hover{opacity:.9}
  :where(.pg-joc-es) .b-reset{background:linear-gradient(90deg,var(--red),var(--red-light)); color:var(--on-red); box-shadow:0 0 18px rgba(var(--red-rgb),.35)}
  :where(.pg-joc-es) .b-reset:hover{opacity:.9}
  :where(.pg-joc-es) .mapcard{padding:10px; position:relative}
  :where(.pg-joc-es) .zoomctl{position:absolute; top:20px; right:20px; display:flex; flex-direction:column; gap:6px; z-index:5}
  :where(.pg-joc-es) .zoomctl button{width:40px; height:40px; border-radius:11px; border:1px solid var(--line);
    background:var(--panel2); color:var(--ink); font-size:22px; font-weight:700; cursor:pointer;
    box-shadow:0 4px 12px -6px rgba(var(--shadow-rgb),.6); font-family:inherit; line-height:1; padding:0}
  :where(.pg-joc-es) .zoomctl button:hover{background:rgba(var(--cyan-rgb),.14); border-color:rgba(var(--cyan-rgb),.5)}
  :where(.pg-joc-es) .zoomctl .rst{font-size:12px; font-weight:700}
  :where(.pg-joc-es) svg#map{width:100%; height:auto; display:block; border-radius:10px; cursor:grab; touch-action:none;
    background:linear-gradient(180deg,var(--sea-top),var(--sea-bottom)); overflow:hidden}
  :where(.pg-joc-es) svg#map.grabbing{cursor:grabbing}
  :where(.pg-joc-es) .prov{stroke:var(--land-stroke); stroke-width:.5; stroke-linejoin:round; cursor:pointer; transition:filter .12s}
  :where(.pg-joc-es) .prov:hover{filter:brightness(1.25)}
  :where(.pg-joc-es) .prov.sel-outline{stroke:var(--white); stroke-width:1.6}
  :where(.pg-joc-es) .prov.correct{stroke:var(--correct); stroke-width:1.8}
  :where(.pg-joc-es) .prov.wrong{stroke:var(--wrong); stroke-width:1.8}
  :where(.pg-joc-es) .compborder{fill:none; stroke:rgba(var(--border-soft-rgb),.4); stroke-width:.8; stroke-dasharray:3 3; pointer-events:none}
  :where(.pg-joc-es) .hit{fill:transparent; cursor:pointer}
  :where(.pg-joc-es) .micro-dot{fill:var(--white); stroke:var(--bg); stroke-width:.8; pointer-events:none; opacity:.65}
  :where(.pg-joc-es) .lbl{font-family:system-ui,sans-serif; font-weight:700; text-anchor:middle;
    paint-order:stroke; stroke:var(--bg); stroke-width:3px; stroke-linejoin:round; pointer-events:none}
  :where(.pg-joc-es) .lbl.place{fill:var(--white); font-size:12px}
  :where(.pg-joc-es) .lbl.ok{fill:var(--green); font-size:12px}
  :where(.pg-joc-es) .lbl.no{fill:var(--red-light); font-size:12px}
  :where(.pg-joc-es) .lbl.sol{fill:var(--label-sol-es); font-size:11.5px}

  /* score */
  :where(.pg-joc-es) #score{grid-column:1 / -1; display:none; padding:14px 16px; border-radius:14px;
    gap:26px; border:1px solid var(--line); flex-wrap:wrap}
  :where(.pg-joc-es) #score.show{display:flex}
  :where(.pg-joc-es) #score .block{display:flex; align-items:center; gap:12px}
  :where(.pg-joc-es) #score .lab{font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); font-weight:700}
  :where(.pg-joc-es) #score .grade{font-size:28px; font-weight:800; line-height:1}
  :where(.pg-joc-es) #score .g-max{color:var(--muted); font-size:15px}
  :where(.pg-joc-es) #score .pill{padding:3px 10px; border-radius:999px; font-weight:600; font-size:13px}
  :where(.pg-joc-es) #score .pill.c{background:var(--correct-soft); color:var(--green)}
  :where(.pg-joc-es) #score .pill.w{background:var(--wrong-soft); color:var(--red)}
  :where(.pg-joc-es) #score .sep{width:1px; align-self:stretch; background:var(--line)}

  /* right rail tabs */
  :where(.pg-joc-es) .railcard{padding:12px; position:sticky; top:14px}
  :where(.pg-joc-es) .tabs{display:flex; gap:6px; margin-bottom:10px}
  :where(.pg-joc-es) .tabbtn{flex:1; font-family:inherit; font-size:13.5px; font-weight:700; cursor:pointer;
    padding:9px 8px; border-radius:10px; border:1px solid var(--line);
    background:var(--panel2); color:var(--muted); transition:.15s}
  :where(.pg-joc-es) .tabbtn.active{background:rgba(var(--cyan-rgb),.14); border-color:var(--accent); color:var(--accent)}
  :where(.pg-joc-es) .tabpane{display:none}
  :where(.pg-joc-es) .tabpane.active{display:block}
  :where(.pg-joc-es) .pane-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
  :where(.pg-joc-es) .pane-head h2{font-size:15px; margin:0; font-weight:800}
  :where(.pg-joc-es) .counter{font-size:12px; color:var(--muted); background:var(--panel2);
    border:1px solid var(--line); padding:3px 9px; border-radius:999px}
  :where(.pg-joc-es) input#filter{width:100%; font-family:inherit; font-size:14px; padding:9px 12px; margin-bottom:8px;
    border:1px solid var(--line); border-radius:10px; background:rgba(var(--input-rgb),.75); color:var(--ink)}
  :where(.pg-joc-es) input#filter::placeholder{color:var(--muted)}
  :where(.pg-joc-es) .list{max-height:64vh; overflow:auto; padding-right:4px}
  :where(.pg-joc-es) .list::-webkit-scrollbar{width:9px}
  :where(.pg-joc-es) .list::-webkit-scrollbar-thumb{background:rgba(var(--line-rgb),.35); border-radius:6px}
  :where(.pg-joc-es) .item{display:flex; align-items:center; justify-content:space-between; gap:8px;
    padding:8px 11px; border-radius:10px; cursor:pointer; border:1px solid transparent; margin-bottom:3px}
  :where(.pg-joc-es) .item:hover{background:var(--panel2)}
  :where(.pg-joc-es) .item .cn{font-weight:600; font-size:14px}
  :where(.pg-joc-es) .item .namecol{display:flex; flex-direction:column; gap:1px; min-width:0}
  :where(.pg-joc-es) .item .cap{font-size:11.5px; color:var(--muted); font-weight:500}
  :where(.pg-joc-es) .item.selected .cap{color:var(--teal)}
  :where(.pg-joc-es) .item.selected{background:var(--accent-soft); border-color:var(--accent)}
  :where(.pg-joc-es) .item.selected .cn{color:var(--accent)}
  :where(.pg-joc-es) .item.done{opacity:.5}
  :where(.pg-joc-es) .item.done .cn{text-decoration:line-through}
  :where(.pg-joc-es) .item .tag{font-size:11px; color:var(--teal); white-space:nowrap}
  :where(.pg-joc-es) .item .right{display:flex; align-items:center; gap:7px; flex:none}
  :where(.pg-joc-es) .eye{display:flex; align-items:center; justify-content:center; width:30px; height:30px; padding:0;
    border:1px solid var(--line); border-radius:8px; background:var(--panel2); color:var(--muted);
    cursor:pointer; flex:none; transition:.12s}
  :where(.pg-joc-es) .eye:hover{background:rgba(var(--cyan-rgb),.14); color:var(--ink)}
  :where(.pg-joc-es) .eye.on{background:var(--teal); border-color:var(--teal); color:var(--on-accent)}

  /* community color matcher */
  :where(.pg-joc-es) .crow{display:flex; align-items:center; justify-content:space-between; gap:8px;
    padding:7px 10px; border-radius:10px; border:1px solid transparent; margin-bottom:4px}
  :where(.pg-joc-es) .crow .cn{font-weight:600; font-size:13.5px}
  :where(.pg-joc-es) .crow.correct{border-color:var(--correct); background:var(--correct-soft)}
  :where(.pg-joc-es) .crow.wrong{border-color:var(--wrong); background:var(--wrong-soft)}
  :where(.pg-joc-es) .cselect{position:relative; flex:none}
  :where(.pg-joc-es) .cselect .trigger{display:flex; align-items:center; gap:6px; cursor:pointer;
    border:1px solid var(--line); border-radius:9px; padding:5px 8px; background:var(--panel2)}
  :where(.pg-joc-es) .cselect .sw{width:22px; height:22px; border-radius:6px; border:1px solid rgba(var(--white-rgb),.25);
    background:transparent}
  :where(.pg-joc-es) .cselect .cv{font-size:11px; color:var(--muted); font-weight:700}
  :where(.pg-joc-es) .cselect .pop{position:absolute; right:0; top:34px; z-index:30; display:none;
    grid-template-columns:repeat(5,1fr); gap:6px; padding:10px;
    background:var(--popover-bg); border:1px solid var(--line); border-radius:12px;
    box-shadow:0 18px 40px rgba(var(--shadow-rgb),.6); width:180px}
  :where(.pg-joc-es) .cselect.open .pop{display:grid}
  :where(.pg-joc-es) .cselect .opt{width:24px; height:24px; border-radius:6px; cursor:pointer;
    border:1px solid rgba(var(--white-rgb),.2)}
  :where(.pg-joc-es) .cselect .opt:hover{outline:2px solid var(--white)}
  :where(.pg-joc-es) .cselect .opt.used{opacity:.3; cursor:not-allowed; position:relative}
  :where(.pg-joc-es) .cselect .opt.used:hover{outline:none}
  :where(.pg-joc-es) .cselect .opt.used::after{content:""; position:absolute; left:50%; top:50%;
    width:135%; height:2px; background:var(--white); opacity:.85; border-radius:2px;
    transform:translate(-50%,-50%) rotate(-45deg)}
  :where(.pg-joc-es) .cselect .opt-clear{grid-column:1 / -1; text-align:center; font-size:11px; font-weight:700;
    color:var(--muted); border:1px dashed var(--line); border-radius:6px; padding:5px;
    cursor:pointer; margin-bottom:2px}
  :where(.pg-joc-es) .cselect .opt-clear:hover{color:var(--ink); border-color:var(--accent)}

  :where(.pg-joc-es) #loading{padding:40px; text-align:center; color:var(--muted); font-size:15px; line-height:1.6}
  :where(.pg-joc-es) footer{max-width:1680px; margin:16px auto 0; font-size:12px; color:var(--muted); text-align:center}
  :where(.pg-joc-es) .foot-brand{height:18px;margin:0 auto 8px}