:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
--bg:#fff5f9;--ink:#3b1428;--mute:#946077;--glass:rgba(255,255,255,.62);--bd:rgba(255,255,255,.9);--acc:#ec4899;--acc2:#a855f7;--sh:0 10px 30px rgba(236,72,153,.15);--b1:#ff9ac8;--b2:#d8b4fe;--b3:#fed7aa}
html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#1a0b15;--ink:#ffe6f1;--mute:#c79ab3;--glass:rgba(60,24,46,.6);--bd:rgba(255,255,255,.1);--sh:0 10px 30px rgba(0,0,0,.4);--b1:#be185d;--b2:#6b21a8;--b3:#9a3412}}
:root[data-theme="dark"]{--bg:#1a0b15;--ink:#ffe6f1;--mute:#c79ab3;--glass:rgba(60,24,46,.6);--bd:rgba(255,255,255,.1);--sh:0 10px 30px rgba(0,0,0,.4);--b1:#be185d;--b2:#6b21a8;--b3:#9a3412}
*,*:before,*:after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Plus Jakarta Sans",system-ui,sans-serif;min-height:100%;overflow-x:hidden}
.blob{position:fixed;border-radius:50%;filter:blur(80px);opacity:.55;z-index:-1;animation:fl 18s ease-in-out infinite alternate}
.b1{width:420px;height:420px;background:var(--b1);top:-120px;left:-100px}
.b2{width:380px;height:380px;background:var(--b2);top:30%;right:-120px;animation-delay:-6s}
.b3{width:340px;height:340px;background:var(--b3);bottom:-100px;left:25%;animation-delay:-11s}
@keyframes fl{to{transform:translate(60px,40px) scale(1.15)}}
.wrap{max-width:1100px;margin:0 auto;padding:0 16px}
.hero{text-align:center;padding:44px 0 12px}
.badge{display:inline-flex;gap:8px;align-items:center;padding:7px 14px;border-radius:99px;background:var(--glass);border:1px solid var(--bd);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-size:13px;font-weight:600;box-shadow:var(--sh)}
.badge i{width:8px;height:8px;border-radius:50%;background:var(--acc);animation:pu 1.6s infinite}
@keyframes pu{50%{box-shadow:0 0 0 7px rgba(236,72,153,0);transform:scale(1.2)}}
h1{margin:18px 0 10px;font-size:clamp(38px,9vw,76px);line-height:1;font-weight:800;letter-spacing:-.03em}
h1 span{background:linear-gradient(90deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{max-width:560px;margin:0 auto;color:var(--mute);font-size:16px;line-height:1.5}
.stats{display:flex;gap:10px;justify-content:center;margin-top:22px;flex-wrap:wrap}
.chip{padding:10px 18px;border-radius:18px;background:var(--glass);border:1px solid var(--bd);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--sh)}
.chip b{display:block;font-size:24px}.chip small{color:var(--mute);font-size:12px}
.compose{max-width:600px;margin:28px auto 8px;padding:18px;border-radius:28px;background:var(--glass);border:1px solid var(--bd);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:var(--sh);display:grid;gap:12px}
.compose textarea,.compose input,.compose select{width:100%;border:1px solid transparent;border-radius:16px;padding:12px 14px;background:rgba(255,255,255,.55);color:var(--ink);font:inherit;outline:0;transition:.2s}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .compose textarea,:root:not([data-theme="light"]) .compose input,:root:not([data-theme="light"]) .compose select{background:rgba(0,0,0,.25)}}
.compose textarea{min-height:90px;resize:vertical;font-family:"Caveat",cursive;font-size:22px}
.compose :is(textarea,input,select):focus{border-color:var(--acc);box-shadow:0 0 0 4px rgba(236,72,153,.18)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.row>input,.row>select{flex:1;min-width:130px}
.cols{display:flex;gap:8px}.sw{width:30px;height:30px;border-radius:50%;border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.2);cursor:pointer;padding:0;transition:.2s}.sw.on{transform:scale(1.2);outline:2px solid var(--acc)}
.foot{display:flex;justify-content:space-between;align-items:center;gap:10px}.cnt{font-size:12px;color:var(--mute)}
.post{border:0;border-radius:99px;padding:13px 26px;font:inherit;font-weight:700;color:#fff;background:linear-gradient(90deg,var(--acc),var(--acc2));box-shadow:0 8px 20px rgba(236,72,153,.4);cursor:pointer;transition:.2s}
.post:hover{transform:translateY(-2px) scale(1.03)}.post:active{transform:scale(.96)}.post:disabled{opacity:.5}
.warn{text-align:center;color:var(--mute);font-size:13px}
.pills{display:flex;gap:8px;overflow-x:auto;padding:18px 16px 6px;max-width:1100px;margin:0 auto;scrollbar-width:none}
.pills::-webkit-scrollbar{display:none}
.pill{flex:0 0 auto;border:1px solid var(--bd);background:var(--glass);color:var(--ink);padding:8px 14px;border-radius:99px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:.2s}
.pill.on{background:linear-gradient(90deg,var(--acc),var(--acc2));color:#fff;border-color:transparent}
.wall{columns:220px;column-gap:18px;padding:12px 0 80px}
.note{break-inside:avoid;position:relative;margin:0 0 18px;padding:18px 16px 14px;border-radius:24px;color:#3b1428;box-shadow:0 12px 28px rgba(120,30,80,.18),inset 0 1px 0 rgba(255,255,255,.7);animation:pop .5s cubic-bezier(.2,1.4,.4,1) both;transition:transform .25s}
.note:before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(160deg,rgba(255,255,255,.55),rgba(255,255,255,0) 60%);pointer-events:none}
.note:hover{transform:translateY(-6px) rotate(-1deg)}
@keyframes pop{from{opacity:0;transform:translateY(20px) scale(.9)}}
.txt{position:relative;font-family:"Caveat",cursive;font-size:24px;line-height:1.15;margin:0 0 14px;overflow-wrap:anywhere}
.by{position:relative;display:flex;align-items:center;gap:8px;font-size:12px}
.av{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.75);display:grid;place-items:center;font-weight:800;flex:none}
.by div{flex:1;min-width:0;line-height:1.25}.by b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.by span{opacity:.7}
.lk,.del{position:relative;border:0;background:rgba(255,255,255,.7);border-radius:99px;padding:5px 9px;font:inherit;font-size:12px;cursor:pointer;color:#3b1428;transition:.2s}
.lk:hover{transform:scale(1.12)}.lk.on{background:#fff;box-shadow:0 0 0 2px var(--acc)}
.empty{text-align:center;color:var(--mute);padding:40px 0;column-span:all}
footer{text-align:center;color:var(--mute);font-size:12px;padding:0 0 30px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Note colours. A note stores the number, not the colour itself. */
.c0{background:#ffc2d9}.c1{background:#ff9ec4}.c2{background:#e9d5ff}.c3{background:#fed7aa}.c4{background:#fbcfe8}
.note{animation:none}.note.new{animation:pop .5s cubic-bezier(.2,1.4,.4,1) both}
.note.new:nth-child(2){animation-delay:40ms}.note.new:nth-child(3){animation-delay:80ms}.note.new:nth-child(4){animation-delay:120ms}.note.new:nth-child(5){animation-delay:160ms}.note.new:nth-child(6){animation-delay:200ms}.note.new:nth-child(7){animation-delay:240ms}.note.new:nth-child(8){animation-delay:280ms}.note.new:nth-child(n+9){animation-delay:320ms}
.rep{position:relative;border:0;background:transparent;border-radius:99px;padding:5px 6px;font:inherit;font-size:12px;cursor:pointer;color:#3b1428;opacity:.45;transition:.2s}
.rep:hover,.rep:focus-visible{opacity:1;background:rgba(255,255,255,.7)}
:is(button,select,textarea,input,summary):focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* The countries number opens the map. */
button.chip{font:inherit;color:inherit;cursor:pointer;text-align:center;transition:.2s}
button.chip:hover{transform:translateY(-2px)}
button.chip small{display:block}

/* Under the composer: the house rule, and why a note wasn't pinned. */
.kind{text-align:center;color:var(--mute);font-size:13px;margin:0}
.link{border:0;background:none;padding:0;font:inherit;color:var(--acc);font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.warn{padding:10px 12px;border-radius:14px;background:rgba(236,72,153,.1);color:var(--ink)}

/* Pop-ups: the map, the guidelines and the report question. */
dialog{width:calc(100% - 24px);max-width:860px;max-height:calc(100dvh - 24px);padding:0;border:1px solid var(--bd);border-radius:28px;background:var(--bg);color:var(--ink);box-shadow:0 30px 80px rgba(60,10,40,.35);overflow:auto}
dialog.small{max-width:440px}
dialog::backdrop{background:rgba(59,20,40,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.dlg{padding:20px}
.dhead{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.dhead h2{margin:0;font-size:22px;letter-spacing:-.02em}.dhead p{margin:4px 0 0;color:var(--mute);font-size:13px}
.dhead>div{flex:1;min-width:0}
.x{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--bd);background:var(--glass);color:var(--ink);font:inherit;font-size:16px;cursor:pointer}
.dlg ul{margin:0 0 14px;padding-left:20px;line-height:1.55;font-size:15px}.dlg h3{margin:16px 0 6px;font-size:15px}.dlg p{line-height:1.55;font-size:15px}
.acts{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}
.ghost{border:1px solid var(--bd);border-radius:99px;padding:11px 20px;font:inherit;font-weight:600;background:var(--glass);color:var(--ink);cursor:pointer}

/* The map. Land with notes is tinted; a bubble carries the number. */
:root{--land:#f1d9e4;--land-on:#f9a8d0;--coast:#fff5f9;--bubble:#db2777;--track:rgba(236,72,153,.12)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--land:#3a1c2e;--land-on:#8a2a5c;--coast:#1a0b15;--bubble:#f472b6;--track:rgba(255,255,255,.08)}}
:root[data-theme="dark"]{--land:#3a1c2e;--land-on:#8a2a5c;--coast:#1a0b15;--bubble:#f472b6;--track:rgba(255,255,255,.08)}
.mapbox{position:relative;border-radius:20px;background:var(--glass);border:1px solid var(--bd);padding:8px;min-height:120px}
.mapbox svg{display:block;width:100%;height:auto}
.land{fill:var(--land);stroke:var(--coast);stroke-width:.6;vector-effect:non-scaling-stroke}
.land.has{fill:var(--land-on);cursor:pointer}
.bub{fill:var(--bubble);fill-opacity:.9;stroke:var(--coast);vector-effect:non-scaling-stroke;stroke-width:1.5;cursor:pointer}
.bub.sel{stroke:var(--ink);stroke-width:2.5}
.num{fill:#fff;font-weight:800;text-anchor:middle;dominant-baseline:central;pointer-events:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .num{fill:#1a0b15}}
:root[data-theme="dark"] .num{fill:#1a0b15}
.pick{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;margin:10px 2px 4px;font-size:14px;color:var(--mute)}
.pick b{color:var(--ink)}
.pick .post{padding:9px 16px;font-size:13px;box-shadow:none;flex:none}
.rank{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:4px}
.rank button{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:4px 10px;align-items:center;width:100%;border:0;border-radius:12px;padding:8px 10px;background:none;color:var(--ink);font:inherit;font-size:14px;text-align:left;cursor:pointer}
.rank button:hover{background:var(--track)}
.rank .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank .ct{font-weight:800;text-align:right;font-variant-numeric:tabular-nums}
.rank .bar{grid-column:1/-1;height:6px;border-radius:99px;background:var(--track);overflow:hidden}
.rank .bar i{display:block;height:100%;border-radius:99px;background:var(--bubble);min-width:6px}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:5;max-width:calc(100% - 32px);padding:11px 18px;border-radius:99px;background:var(--ink);color:var(--bg);font-size:14px;font-weight:600;box-shadow:var(--sh)}
footer .link{color:inherit;font-weight:400}
/* Phones: the name and country each get a full line, and the button keeps to one. */
.post{white-space:nowrap}
.row>input,.row>select{min-width:160px}
@media (max-width:420px){.cols{gap:5px}.foot{gap:6px}.post{padding:13px 20px}}

/* The game poster (ads.js): just the image, as large as the screen allows at its 4:5 shape. */
dialog.ad{width:min(calc(100% - 24px),440px,calc((100dvh - 76px)*.8));max-width:none;max-height:none;border:0;background:none;box-shadow:none;overflow:visible}
dialog.ad[open]{animation:pop .45s cubic-bezier(.2,1.4,.4,1) both}
dialog.ad a{display:block;text-decoration:none;cursor:pointer;border-radius:22px}
dialog.ad img{display:block;width:100%;height:auto;border-radius:22px;box-shadow:0 30px 80px rgba(20,5,15,.5)}
.adtag{display:block;width:fit-content;margin:0 auto 10px;padding:6px 14px;border-radius:99px;background:rgba(255,255,255,.92);color:#3b1428;font-size:13px}
dialog.ad a:focus-visible{outline:3px solid #fff;outline-offset:3px}
/* The ✕ sits on the poster's top corner, big enough for a thumb. */
dialog.ad .x{position:absolute;top:44px;right:8px;width:40px;height:40px;border:2px solid #fff;background:#1d2946;color:#fff;font-size:17px;box-shadow:0 4px 12px rgba(0,0,0,.35)}

/* The admin page (admin.html). */
.hero.admin h1{font-size:clamp(34px,7vw,56px)}
.signin{display:flex;justify-content:center;min-height:44px;margin-top:20px;color:var(--mute);font-size:14px}
.stats .ghost{align-self:center}
.find{flex:1 1 180px;min-width:160px;max-width:320px;margin-left:auto;border:1px solid var(--bd);border-radius:99px;padding:8px 14px;background:var(--glass);color:var(--ink);font:inherit;font-size:13px}
.tag{position:relative;display:inline-block;margin:0 0 10px;padding:3px 10px;border-radius:99px;background:rgba(255,255,255,.7);font-size:12px;font-weight:600}
.tag.bad{background:#3b1428;color:#fff}.tag.ok{background:#fff}
.tools{position:relative;display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
.tools .lk{padding:7px 12px;font-weight:600}
.lk.danger{background:#3b1428;color:#fff}
.post.danger{background:#be123c;box-shadow:none}
.quote{font-family:"Caveat",cursive;font-size:22px;line-height:1.2;margin:0;padding:12px 14px;border-radius:14px;background:var(--track);overflow-wrap:anywhere}
[hidden]{display:none!important}