/* Wobbly Blue Marble — the globe page.
   One deliberate visual world: deep blue, chunky rounded type, flat cartoon
   shading. It commits to a single theme rather than swapping palettes. */
:root{
  --abyss:#03153a; --deep:#062f7a; --sea:#1257c8; --sky:#4aa8ff;
  --foam:#d3e9ff; --ink:#04122e; --sun:#ffd25e;
  --panel:rgba(6,34,90,.55); --edge:rgba(147,205,255,.28);
  --display:"Baloo 2","Trebuchet MS",system-ui,sans-serif;
  --body:"Nunito","Segoe UI",system-ui,sans-serif;
  --mono:"DM Mono",ui-monospace,"SFMono-Regular",monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body.globe-page{
  margin:0;font-family:var(--body);color:var(--foam);overflow-x:hidden;
  background:radial-gradient(120% 90% at 50% 8%,#2a80ea 0%,#1257c8 34%,#082f7e 62%,#03153a 100%),var(--abyss);
}
:focus-visible{outline:3px solid var(--sun);outline-offset:2px;border-radius:6px}
/* The globe and its controls fill the first screen; everything below is an
   ordinary scrolling page. Confining the interface to a stage rather than to
   the viewport is what lets the two coexist. */
.globe-stage{position:relative;height:100vh;height:100svh;overflow:hidden;isolation:isolate}
canvas#scene{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
canvas#scene.dragging{cursor:grabbing}
canvas#scene.over{cursor:pointer}
.loading{position:absolute;inset:auto 0 50% 0;text-align:center;font-family:var(--display);font-weight:600;font-size:17px;color:#9dcbff}

.hud{position:absolute;inset:0;z-index:7;pointer-events:none;display:grid;grid-template-rows:auto 1fr auto;padding:clamp(14px,2.4vw,28px);gap:12px}
.hud a,.hud button,.hud input{pointer-events:auto}

/* ---------- masthead ---------- */
.top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.mark{flex:0 0 auto}
.globe-nav{flex:1 1 auto;min-width:0}
.mark{display:flex;align-items:center;gap:11px;text-decoration:none;pointer-events:auto}
.badge{width:42px;height:42px;border-radius:50%;flex:none;position:relative;
  background:radial-gradient(circle at 32% 28%,#6fc6ff,#1560d6 62%,#0b3a92);
  border:3px solid var(--ink);box-shadow:0 5px 0 rgba(4,18,46,.45)}
.badge::after{content:"";position:absolute;inset:7px 6px auto 8px;height:11px;border-radius:0 0 13px 13px;
  background:#63d18a;border-bottom:3px solid var(--ink);transform:rotate(-12deg)}
.mark-txt b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(19px,2.3vw,27px);line-height:.98;color:#fff;text-shadow:0 3px 0 rgba(4,18,46,.5)}
/* #a9d3ff on the blue ground measured 4.17:1 — under the 4.5:1 that small
   text needs. #cfe6ff clears it at 6.3:1 and looks the same at a glance. */
.mark-txt i{display:block;font-style:normal;font-size:12px;font-weight:600;color:#cfe6ff;margin-top:3px}
.top-right{display:flex;align-items:center;gap:10px}

.searchbox{position:relative}
.searchbox input{
  width:min(230px,42vw);font-family:var(--body);font-size:13.5px;font-weight:600;color:#fff;
  background:var(--panel);border:1.5px solid var(--edge);border-radius:999px;padding:9px 15px;
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
}
.searchbox input::placeholder{color:#8dc2ff}
#results{position:absolute;top:calc(100% + 6px);right:0;width:min(280px,72vw);list-style:none;margin:0;padding:5px;
  background:rgba(4,22,62,.94);border:1.5px solid var(--edge);border-radius:14px;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  max-height:44vh;overflow:auto;z-index:9}
#results button{display:flex;align-items:baseline;gap:7px;width:100%;text-align:left;border:0;background:none;
  color:#cfe6ff;font-family:var(--body);font-weight:600;font-size:13.5px;padding:8px 10px;border-radius:9px;cursor:pointer}
#results button:hover{background:rgba(30,96,200,.6);color:#fff}
#results i{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:10px;color:#7fb3ee}
.lang-switch{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  border:1.5px solid var(--edge);border-radius:999px;padding:9px 13px;color:#cfe6ff;background:var(--panel);white-space:nowrap}
.lang-switch:hover{background:rgba(30,96,200,.7);color:#fff}

/* ---------- panels ---------- */
.panel{background:var(--panel);border:1.5px solid var(--edge);border-radius:16px;padding:14px 16px;
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);max-width:268px}
.panel h2{margin:0 0 10px;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.19em;text-transform:uppercase;color:#8dc2ff}
.panel dl{margin:0;display:grid;gap:7px;font-size:12.5px}
.panel dl>div{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.panel dt{color:#a9d3ff}
.panel dd{margin:0;font-family:var(--mono);font-size:12px;color:#fff;font-variant-numeric:tabular-nums;text-align:right}
.middle{display:flex;align-items:flex-end;min-height:0;padding-bottom:52px}
.sunp{position:absolute;z-index:5;top:calc(clamp(14px,2.4vw,28px) + 62px);right:clamp(14px,2.4vw,28px)}
.sun-line{display:flex;align-items:baseline;gap:8px;font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums}
.sun-dot{width:9px;height:9px;border-radius:50%;background:var(--sun);box-shadow:0 0 12px 3px rgba(255,210,94,.55);flex:none;translate:0 -1px}
.sun-note{margin:9px 0 0;font-size:11.5px;line-height:1.45;color:#a9d3ff}

/* ---------- zoom + layers ---------- */
.rail{position:absolute;z-index:8;right:clamp(14px,2.4vw,28px);top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:center;gap:9px}
.rail>button{width:38px;height:38px;border-radius:12px;border:1.5px solid var(--edge);background:var(--panel);
  color:var(--foam);font-family:var(--display);font-weight:600;font-size:21px;line-height:1;cursor:pointer;
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
.rail>button:hover{background:rgba(30,96,200,.75)}
.gauge{width:6px;height:110px;border-radius:99px;background:rgba(6,34,90,.55);border:1.5px solid var(--edge);position:relative;overflow:hidden}
.gauge i{position:absolute;left:0;right:0;bottom:0;height:0%;background:linear-gradient(#ffd25e,#ff9f43);transition:height .12s linear}
.layers{display:flex;flex-direction:column;gap:5px;margin-top:6px}
.layers button{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  border:1.5px solid var(--edge);border-radius:999px;padding:6px 10px;background:var(--panel);color:#a8cdf5;
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);white-space:nowrap;
}
.layers button[aria-pressed="true"]{color:#04122e;background:var(--sun);border-color:var(--sun)}

/* ---------- hint ---------- */
.hint{position:absolute;z-index:6;left:50%;bottom:86px;transform:translateX(-50%);text-align:center;
  transition:opacity .35s ease;pointer-events:none;margin:0}
.hint b{display:block;font-family:var(--display);font-weight:600;font-size:16px;color:#cfe6ff}
.hint span{display:block;font-size:11.5px;font-weight:600;color:#7fb3ee;margin-top:2px}
.hint.gone{opacity:0}

/* ---------- map labels ---------- */
.labels{position:absolute;inset:0;z-index:4;pointer-events:none}
.lbl{
  position:absolute;top:0;left:0;translate:0 0;pointer-events:auto;cursor:pointer;
  display:flex;align-items:center;gap:5px;border:0;background:none;padding:2px 4px;margin:-11px 0 0 0;
  transform:translateX(-50%);white-space:nowrap;opacity:0;transition:opacity .18s ease,color .13s ease;
  font-family:var(--body);font-weight:700;font-size:12.5px;color:#fff;
  text-shadow:0 1px 3px rgba(3,15,40,.95),0 0 8px rgba(3,15,40,.7);
}
.lbl.on{opacity:1}
.lbl:hover,.lbl.sel{color:var(--sun)}
.lbl .lf{font-size:11px}
.lbl-country{font-size:12.5px}
.lbl-river{font-style:italic;font-weight:600;color:#bfe9ff;font-size:12px}
.lbl-mountain,.lbl-wonder{font-family:var(--display);font-weight:600;font-size:13px}
.lbl-mountain::before,.lbl-wonder::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sun);
  box-shadow:0 0 0 3px rgba(255,210,94,.22);flex:none}

/* ---------- place panel ---------- */
.place{
  position:absolute;z-index:9;left:clamp(14px,2.4vw,28px);bottom:clamp(14px,2.4vw,28px);
  width:min(320px,84vw);max-width:none;background:rgba(4,22,62,.92);
  opacity:0;transform:translateY(12px);visibility:hidden;
  transition:opacity .2s ease,transform .2s cubic-bezier(.2,1.3,.5,1);
  box-shadow:0 18px 40px rgba(2,12,36,.5);
}
.place.show{opacity:1;transform:translateY(0);visibility:visible}
.place .kicker{margin:0;font-family:var(--mono);font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--sun)}
.place h2{margin:5px 0 0;font-family:var(--display);font-weight:800;font-size:23px;line-height:1.05;color:#fff;
  letter-spacing:0;text-transform:none}
.place .intro{margin:9px 0 0;font-size:13.5px;line-height:1.45;color:#cfe6ff}
.place dl{margin:12px 0 0}
.place .btn{display:block;margin-top:13px;text-align:center;text-decoration:none;font-family:var(--display);
  font-weight:700;font-size:15px;background:var(--sea);color:#fff;border-radius:12px;padding:11px 14px;box-shadow:0 4px 0 #0b3a92}
.place .btn:hover{background:#1a68e0}
.place .close{position:absolute;top:10px;right:11px;width:26px;height:26px;border-radius:8px;border:1.5px solid var(--edge);
  background:none;color:#a9d3ff;font-size:15px;line-height:1;cursor:pointer}
.place .close:hover{color:#fff;background:rgba(30,96,200,.5)}
.place .sub:empty{display:none}

/* ---------- crawlable index ---------- */
.site-index{
  position:absolute;z-index:3;left:0;right:0;bottom:0;padding:8px clamp(14px,2.4vw,28px) 10px;
  background:linear-gradient(transparent,rgba(3,15,40,.8) 55%);
}
.site-index details{margin-top:6px;text-align:center}
.site-index summary{
  display:inline-block;cursor:pointer;list-style:none;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;color:#6f9fd8;padding:3px 8px;border-radius:999px;
}
.site-index summary::-webkit-details-marker{display:none}
.site-index summary:hover{color:#cfe6ff}
.site-index details nav{margin-top:6px}
.site-index h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.site-index .lede{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.site-index nav{display:flex;justify-content:center;flex-wrap:wrap;gap:6px}
.site-index a{
  text-decoration:none;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:#9dc6f5;border:1.5px solid rgba(147,205,255,.22);border-radius:999px;padding:6px 12px;
}
.site-index a:hover{color:#fff;border-color:var(--sun)}

@media (max-width:900px){
  .sunp{display:none}
  .panel.stats{max-width:172px;padding:11px 12px}
  .panel.stats dl{font-size:11px}
  .mark-txt i{display:none}
  .hint{bottom:64px}
  .place{left:50%;transform:translate(-50%,12px);bottom:60px}
  .place.show{transform:translate(-50%,0)}
  .layers button{font-size:9px;padding:5px 8px}
}
@media (max-width:620px){
  .searchbox input{width:150px}
  .panel.stats{display:none}
}
@media (prefers-reduced-motion:reduce){
  .place,.lbl,.hint{transition:none}
}

/* ============================================================
   Explorer mode: the pass, the dice, the guessing round
   ============================================================ */
.rail .round{
  width:38px;height:38px;border-radius:50%;border:1.5px solid var(--edge);background:var(--panel);
  color:var(--foam);font-size:15px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
}
.rail .round:hover{background:rgba(30,96,200,.75);color:#fff}
#dice span{font-family:var(--display);font-weight:800;font-size:18px}
#playBtn span{font-size:13px;translate:1px 0}

.pass{position:relative;width:44px;height:44px;display:grid;place-items:center}
.pass .ring{
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(var(--sun) 0deg, rgba(255,255,255,.16) 0);
  -webkit-mask:radial-gradient(circle, transparent 62%, #000 63%);
          mask:radial-gradient(circle, transparent 62%, #000 63%);
}
.pass b{
  font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums;color:#fff;
  background:rgba(6,34,90,.72);border-radius:50%;width:30px;height:30px;display:grid;place-items:center;
}
@keyframes stampPop{0%{transform:scale(1)}35%{transform:scale(1.28)}100%{transform:scale(1)}}
.pass.stamp{animation:stampPop .45s cubic-bezier(.2,1.5,.4,1)}

.place-extra{margin-top:11px;display:grid;gap:6px}
.place-extra:empty{display:none}
.xrow{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:12.5px;color:#a9d3ff}
.xrow b{font-family:var(--mono);font-size:12px;color:#fff;font-variant-numeric:tabular-nums}
.homebtn{
  margin-top:4px;width:100%;cursor:pointer;font-family:var(--body);font-weight:700;font-size:12.5px;
  color:#cfe6ff;background:rgba(255,255,255,.08);border:1.5px solid var(--edge);border-radius:10px;padding:8px;
}
.homebtn:hover{background:rgba(30,96,200,.6);color:#fff}
.homebtn.is-home{color:var(--sun);border-color:rgba(255,210,94,.5)}
.newstamp{margin:6px 0 0;font-family:var(--display);font-weight:600;font-size:13px;color:var(--sun)}

.game{
  position:absolute;z-index:10;left:50%;bottom:clamp(14px,2.4vw,28px);transform:translateX(-50%);
  width:min(560px,92vw);background:rgba(4,22,62,.94);border:1.5px solid var(--edge);border-radius:18px;
  padding:15px 17px 16px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 18px 44px rgba(2,12,36,.55);
}
.game .gclose{position:absolute;top:9px;right:10px;width:26px;height:26px;border-radius:8px;
  border:1.5px solid var(--edge);background:none;color:#a9d3ff;font-size:15px;line-height:1;cursor:pointer}
.game .gclose:hover{color:#fff;background:rgba(30,96,200,.5)}
.ghead{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin:0 26px 11px 0}
.ghead p{margin:0;font-family:var(--display);font-weight:700;font-size:18px;color:#fff}
.ghead b{font-family:var(--mono);font-size:13px;color:var(--sun);font-variant-numeric:tabular-nums}
.gopts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.gopts button{
  cursor:pointer;font-family:var(--body);font-weight:700;font-size:14.5px;color:#0a2350;
  background:#eaf3ff;border:2px solid transparent;border-radius:11px;padding:11px 10px;min-height:46px;
}
.gopts button:hover:not(:disabled){background:#fff}
.gopts button:disabled{opacity:.75;cursor:default}
.gopts button.right{background:#7fe0a0;border-color:#2f9159;opacity:1}
.gopts button.wrong{background:#ffb0b0;border-color:#b23b3b;opacity:1}
.gopts .gnext{grid-column:1/-1;background:var(--sun);box-shadow:0 3px 0 #c99b28}
body.playing .place{display:none}
body.playing .hint{opacity:0}

@media (max-width:900px){
  .game{bottom:8px;padding:12px 14px 13px}
  .ghead p{font-size:16px}
  .pass{width:38px;height:38px}
  .pass b{width:26px;height:26px;font-size:11px}
}
@media (max-width:560px){
  .gopts{grid-template-columns:1fr}
}

/* ---------- header navigation on the globe ---------- */
.globe-nav{
  display:flex;gap:2px;flex-wrap:nowrap;align-items:center;margin:7px 0 0 8px;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
          mask-image:linear-gradient(90deg,#000 88%,transparent);
}
.globe-nav::-webkit-scrollbar{display:none}
.globe-nav a{
  text-decoration:none;font-family:var(--body);font-weight:700;font-size:12.5px;color:#bcdcff;
  padding:6px 11px;border-radius:999px;white-space:nowrap;transition:background .13s ease,color .13s ease;
}
.globe-nav a:hover{background:rgba(255,255,255,.14);color:#fff}
.mark-txt h1{
  margin:0;font-family:var(--display);font-weight:800;font-size:clamp(19px,2.3vw,27px);
  line-height:.98;color:#fff;text-shadow:0 3px 0 rgba(4,18,46,.5);
}

/* ---------- capital and animal labels ---------- */
.lbl-capital{
  font-family:var(--body);font-weight:600;font-size:11px;color:#e6f2ff;letter-spacing:.01em;
}
.lbl-capital::before{
  content:"";width:5px;height:5px;border-radius:50%;background:#fff;
  border:1.5px solid var(--ink);box-shadow:0 0 0 2px rgba(255,255,255,.25);flex:none;
}
.lbl-animal{font-family:var(--display);font-weight:600;font-size:12px;color:#c8f0d4}
.lbl-animal::before{
  content:"";width:5px;height:5px;border-radius:50%;background:#7fe0a0;
  box-shadow:0 0 0 3px rgba(127,224,160,.2);flex:none;
}

@media (max-width:1100px){ .globe-nav{max-width:34vw} }
@media (max-width:820px){ .globe-nav{display:none} }

/* the map runs behind the header, so give the header its own ground */
.hud::before{
  content:"";position:absolute;left:0;right:0;top:0;height:96px;pointer-events:none;
  background:linear-gradient(rgba(3,15,40,.72),rgba(3,15,40,0));
}
.place .kicker{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100% - 34px)}

/* ---------- the article beneath the globe ---------------------------------
   The paper tokens live in site.css, which the globe page does not load, so
   they are repeated here with the same values.
   Scrolls in under the stage. A paper card on the deep blue, so it reads like
   the rest of the site rather than like a caption on the canvas. */
.globe-copy{
  --paper:#f4f9ff; --paper-2:#e6f1ff; --rule:#c9dcf3; --text:#0e2547;
  position:relative;z-index:11;padding:0 clamp(14px,2.4vw,28px) 56px;
}
.gc-inner{
  max-width:760px;margin:0 auto;background:var(--paper);color:var(--text);
  border-radius:22px;padding:clamp(22px,4vw,40px);
  box-shadow:0 22px 46px rgba(3,21,58,.42);
}
.gc-inner h2{
  font-family:var(--display);font-weight:800;color:#0a1f42;
  font-size:clamp(21px,3vw,29px);line-height:1.08;margin:30px 0 10px;text-wrap:balance;
}
.gc-inner h2:first-child{margin-top:0}
.gc-inner p{margin:0 0 13px;font-size:16px;line-height:1.65}
.gc-inner a{color:#0f52c4;font-weight:700}
.gc-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;padding-top:20px;border-top:2px solid var(--rule)}
.gc-nav a{
  text-decoration:none;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;border:1.5px solid var(--rule);border-radius:999px;
  padding:8px 14px;color:#123a7d;background:var(--paper-2);
}
.gc-nav a:hover{background:var(--sun);border-color:var(--sun);color:#0a2350}
/* A quiet nudge that there is something below the fold. */
.globe-stage::after{
  content:"";position:absolute;left:50%;bottom:14px;width:22px;height:22px;
  border-right:3px solid rgba(211,233,255,.5);border-bottom:3px solid rgba(211,233,255,.5);
  transform:translateX(-50%) rotate(45deg);pointer-events:none;
  animation:gcHint 2.4s ease-in-out infinite;
}
@keyframes gcHint{0%,100%{opacity:.25;transform:translateX(-50%) translateY(0) rotate(45deg)}
                  50%{opacity:.7;transform:translateX(-50%) translateY(7px) rotate(45deg)}}
@media (prefers-reduced-motion:reduce){.globe-stage::after{animation:none}}
body.playing .globe-stage::after{display:none}

/* ---------- phones ---------------------------------------------------------
   A phone is where most children will meet this, and the desktop layout does
   not survive the trip: the search box ran off the right edge, and the rail of
   layer buttons sat on top of the planet instead of beside it. On a 390 px
   screen the globe is the interface — the controls move to the bottom, out of
   the way of the thing they control, and within reach of a thumb. */
@media (max-width:640px){
  .top{flex-wrap:wrap;gap:8px}
  .mark-txt h1{font-size:20px}
  .mark-txt i{display:none}
  .badge{width:34px;height:34px;border-width:2px}
  .top-right{width:100%;justify-content:space-between}
  .searchbox{flex:1 1 auto;min-width:0}
  .searchbox input{width:100%}

  /* the rail becomes a bar under the globe */
  .rail{
    top:auto;bottom:calc(10px + env(safe-area-inset-bottom));left:0;right:0;
    transform:none;flex-direction:row;flex-wrap:wrap;justify-content:center;
    gap:7px;padding:0 10px;pointer-events:none;
  }
  .rail>*{pointer-events:auto}
  .rail .gauge{display:none}
  .rail>button{width:42px;height:42px}          /* thumb-sized, not mouse-sized */
  /* One sideways-scrolling row, not a stack: seven full-width buttons cover
     the planet they are meant to reveal. */
  .layers{
    display:flex;flex-direction:row;flex-wrap:nowrap;gap:6px;order:-1;
    width:100%;margin:0;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;padding:2px 2px 4px;justify-content:flex-start;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 94%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 4%,#000 94%,transparent);
  }
  .layers::-webkit-scrollbar{display:none}
  .layers button{flex:0 0 auto;width:auto;font-size:10.5px;padding:8px 12px}
  .pass{order:2}

  .sunp{display:none}                            /* the sun panel is desktop garnish */
  .hint{bottom:auto;top:52%;font-size:13px;padding:0 22px;text-shadow:0 2px 8px rgba(3,21,58,.8)}
  .globe-stage::after{display:none}              /* the rail already fills the bottom */
  .place{left:8px;right:8px;bottom:8px;max-height:52vh}
}
@media (max-width:400px){
  .layers button{font-size:10px;padding:6px 8px}
}


/* ---------- the consent question (globe page) ----------------------------- */
.consent{
  --paper:#f4f9ff; --paper-2:#e6f1ff; --rule:#c9dcf3; --text:#0e2547;
  position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:60;
  width:min(560px,calc(100vw - 24px));
  background:var(--paper);color:var(--text);
  border:1.5px solid var(--rule);border-radius:18px;
  padding:16px 18px 14px;box-shadow:0 18px 44px rgba(3,21,58,.42);
}
.consent p{margin:0 0 12px;font-size:14px;line-height:1.55}
.consent a{color:#0f52c4;font-weight:700}
.consent-btns{display:flex;gap:10px}
.consent-btns button{
  flex:1 1 0;font-family:var(--body);font-size:14.5px;font-weight:800;cursor:pointer;
  border:2px solid #123a7d;border-radius:12px;padding:11px 10px;min-height:46px;
  background:var(--paper-2);color:#123a7d;
}
.consent-btns button[data-a="yes"]{background:var(--sun);border-color:var(--sun);color:#0a2350}
@media (max-width:640px){ .consent{bottom:auto;top:14px} }
@media (max-width:420px){ .consent-btns{flex-direction:column} }