/* Pocket Wex - public pages (privacy, account deletion). Same colours as the game (art/Palette.kt), day and night by prefers-color-scheme. */
:root {
  --ink: #6B4A3C; --soft: #7D5E4B; --paper: #FFFBF0; --cream: #FFF3DA; --edge: #D9B98E; --page: #FFF3DA;
  --green: #79C96C; --green-d: #3E8E5A; --blue: #6DB6F0; --orange: #F5A04A; --red: #E96A5F; --purple: #9C84E8; --yellow: #FFC94A; --teal: #5CCBBF;
  --sky-a: #7EC4F0; --sky-b: #C5E6F8; --sky-c: #FFE2B5;
  --h3: #A6DB8E; --h2: #86CB6A; --h1: #5FAE49; --water-a: #8CCBF5; --water-b: #5BA7E0;
  --glow: rgba(255, 214, 120, .9); --prop: none; --night: 0; --shadow: 0 10px 30px rgba(107, 74, 60, .16);
  --display: "Baloo 2", "Fredoka", "Nunito", ui-rounded, "SF Pro Rounded", "Trebuchet MS", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #F1E6D6; --soft: #C9B7A3; --paper: #2B241F; --cream: #342B25; --edge: #5E4A37; --page: #17120F;
    --green-d: #8FD79F;
    --sky-a: #0E1236; --sky-b: #2B2B72; --sky-c: #B56A7C;
    --h3: #27503F; --h2: #1D3F33; --h1: #142C23; --water-a: #2E5F92; --water-b: #1B3E66;
    --glow: rgba(255, 180, 90, .75); --prop: brightness(.62) saturate(.85); --night: 1; --shadow: 0 10px 30px rgba(0, 0, 0, .45);
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--page); color: var(--ink); font: 17px/1.62 "Nunito", ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--green-d); font-weight: 700; }
img { max-width: 100%; }

/* ------------------------------------------------------------------ the scene */
.scene { position: relative; height: clamp(470px, 66vh, 640px); overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, var(--sky-a) 0%, var(--sky-b) 52%, var(--sky-c) 100%); }
.scene > * { position: absolute; }
.stars { inset: 0 0 40% 0; opacity: var(--night); transition: opacity .6s;
  background:
    radial-gradient(1.6px 1.6px at 8% 18%, #fff, transparent), radial-gradient(1.2px 1.2px at 15% 40%, #fff, transparent),
    radial-gradient(2px 2px at 24% 12%, #fff, transparent), radial-gradient(1.3px 1.3px at 33% 33%, #fff, transparent),
    radial-gradient(1.8px 1.8px at 41% 8%, #ffe9b0, transparent), radial-gradient(1.2px 1.2px at 52% 26%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 61% 14%, #fff, transparent), radial-gradient(1.2px 1.2px at 68% 38%, #fff, transparent),
    radial-gradient(2px 2px at 77% 9%, #fff, transparent), radial-gradient(1.4px 1.4px at 86% 28%, #ffe9b0, transparent),
    radial-gradient(1.2px 1.2px at 93% 16%, #fff, transparent), radial-gradient(1.5px 1.5px at 4% 45%, #fff, transparent);
  animation: twinkle 5s ease-in-out infinite alternate; }
.sun { right: 13%; top: 17%; width: 130px; height: 130px; border-radius: 50%; opacity: calc(1 - var(--night));
  background: radial-gradient(circle, #FFF8D6 0 38%, #FFE08A 40% 62%, transparent 72%); box-shadow: 0 0 90px 40px var(--glow); animation: breathe 6s ease-in-out infinite; }
.moon { right: 14%; top: 14%; width: 96px; height: 96px; border-radius: 50%; opacity: var(--night);
  background: radial-gradient(circle at 36% 34%, #FFFDF0, #F3E7C2 70%); box-shadow: 0 0 70px 24px rgba(255, 240, 190, .35), inset -14px -8px 0 rgba(190, 170, 130, .25); animation: breathe 7s ease-in-out infinite; }
.cloud { height: 54px; width: 170px; border-radius: 60px; background: rgba(255, 255, 255, .92); filter: drop-shadow(0 8px 10px rgba(80, 100, 140, .12)); opacity: calc(.95 - .55 * var(--night)); animation: drift linear infinite; }
.cloud::before, .cloud::after { content: ""; position: absolute; background: inherit; border-radius: 50%; }
.cloud::before { width: 70px; height: 70px; left: 24px; top: -34px; }
.cloud::after { width: 54px; height: 54px; right: 26px; top: -24px; }
.c1 { top: 12%; left: -200px; animation-duration: 95s; } .c2 { top: 27%; left: -260px; --sc: .7; animation-duration: 130s; animation-delay: -40s; }
.c3 { top: 8%; left: -220px; --sc: 1.15; animation-duration: 160s; animation-delay: -95s; }
.hills { left: 0; bottom: 0; width: 100%; height: 66%; }
.hills .h3 { fill: var(--h3); } .hills .h2 { fill: var(--h2); } .hills .h1 { fill: var(--h1); }
.hills .w1 { fill: var(--water-a); } .hills .w2 { fill: var(--water-b); opacity: .55; } .hills .shine { fill: #fff; opacity: calc(.45 - .25 * var(--night)); }
.prop { bottom: 0; transform-origin: 50% 100%; filter: var(--prop); pointer-events: none; user-select: none; }
.tree-l { left: -3%; bottom: 14%; width: clamp(240px, 30vw, 420px); animation: sway 7s ease-in-out infinite; }
.tree-r { right: -2%; bottom: 12%; width: clamp(260px, 32vw, 450px); animation: sway 8s ease-in-out -2s infinite; }
.tree-b { left: 21%; bottom: 9%; width: clamp(130px, 15vw, 210px); animation: sway 6s ease-in-out -1s infinite; }
.bush-l { left: 15%; bottom: 3%; width: clamp(90px, 11vw, 150px); } .bush-r { right: 37%; bottom: 2%; width: clamp(80px, 10vw, 140px); }
.house { left: 31%; bottom: 17%; width: clamp(80px, 9vw, 130px); }
.mill { right: 31%; bottom: 20%; width: clamp(80px, 9vw, 120px); animation: sway 9s ease-in-out infinite; }
.boat { left: 46%; bottom: 6.5%; width: clamp(80px, 11vw, 150px); animation: bob 4.5s ease-in-out infinite; }
.fire { right: 25%; bottom: 2%; width: clamp(54px, 6vw, 84px); filter: none; animation: flick .6s ease-in-out infinite alternate; }
.fire-glow { right: calc(25% - 70px); bottom: -30px; width: 240px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 170, 70, .55), transparent 65%); opacity: var(--night); animation: glow 1.1s ease-in-out infinite alternate; pointer-events: none; }
.flies { inset: 28% 0 0 0; pointer-events: none; opacity: calc(.35 + .65 * var(--night)); }
.flies i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #FFF3A6; box-shadow: 0 0 10px 4px rgba(255, 238, 120, .75); animation: fly 9s ease-in-out infinite; }
.flies i:nth-child(1) { left: 12%; top: 42%; } .flies i:nth-child(2) { left: 22%; top: 70%; animation-delay: -3s; } .flies i:nth-child(3) { left: 37%; top: 55%; animation-delay: -6s; }
.flies i:nth-child(4) { left: 49%; top: 78%; animation-delay: -1s; } .flies i:nth-child(5) { left: 58%; top: 50%; animation-delay: -5s; } .flies i:nth-child(6) { left: 66%; top: 74%; animation-delay: -2s; }
.flies i:nth-child(7) { left: 78%; top: 58%; animation-delay: -7s; } .flies i:nth-child(8) { left: 88%; top: 80%; animation-delay: -4s; } .flies i:nth-child(9) { left: 30%; top: 86%; animation-delay: -8s; } .flies i:nth-child(10) { left: 72%; top: 90%; animation-delay: -3.5s; }
.hero { inset: 11% 0 auto 0; text-align: center; padding: 0 20px; z-index: 3; }
.hero .logo { width: 74px; height: 74px; filter: drop-shadow(0 8px 10px rgba(60, 40, 20, .3)); animation: bob 5s ease-in-out infinite; }
.hero h1 { margin: 2px 0 10px; font: 800 clamp(46px, 9vw, 92px)/1 var(--display); letter-spacing: .5px; color: #fff; -webkit-text-stroke: 7px #6B4A3C; paint-order: stroke fill;
  text-shadow: 0 6px 0 rgba(107, 74, 60, .55), 0 14px 26px rgba(40, 24, 10, .35); }
.ribbon { display: inline-block; position: relative; margin: 0; padding: 8px 34px 10px; font: 800 clamp(17px, 2.6vw, 25px)/1.2 var(--display); color: #fff; background: var(--green-d); border: 3px solid #fff;
  border-radius: 14px; box-shadow: 0 8px 18px rgba(40, 24, 10, .28); text-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
@media (prefers-color-scheme: dark) { .ribbon { background: #3E8E5A; } }
.scene::after { content: ""; position: absolute; inset: auto 0 0 0; height: 70px; z-index: 2; background: linear-gradient(180deg, transparent, var(--page)); }

/* ------------------------------------------------------------------ content */
main { position: relative; z-index: 4; max-width: 920px; margin: -34px auto 0; padding: 0 16px 40px; }
.toc { position: sticky; top: 10px; z-index: 20; display: flex; gap: 8px; overflow-x: auto; padding: 10px; margin: 0 0 22px; border-radius: 22px; scrollbar-width: none;
  background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: blur(12px); border: 3px solid var(--edge); box-shadow: var(--shadow); }
.toc::-webkit-scrollbar { display: none; }
.toc a { flex: none; display: inline-flex; gap: 8px; align-items: center; padding: 7px 15px 7px 9px; border-radius: 999px; text-decoration: none; font: 800 14.5px/1 var(--display); color: var(--ink); background: var(--cream); border: 2px solid transparent; transition: transform .15s, border-color .15s; }
.toc a:hover { transform: translateY(-2px); border-color: var(--green); }
.toc img { width: 24px; height: 24px; }
.paper { position: relative; background: var(--paper); border: 3px solid var(--edge); border-radius: 30px; padding: 26px 28px 28px; margin: 0 0 22px; box-shadow: var(--shadow); scroll-margin-top: 90px; }
.paper::before { content: ""; position: absolute; inset: 6px; border-radius: 24px; border: 2px dashed color-mix(in srgb, var(--edge) 55%, transparent); pointer-events: none; }
.sec { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; }
.badge { flex: none; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--b, var(--green)); border: 3px solid #fff; box-shadow: 0 6px 12px rgba(107, 74, 60, .25), inset 0 -5px 0 rgba(0, 0, 0, .12); }
.badge img { width: 36px; height: 36px; }
h2 { margin: 0; font: 800 clamp(23px, 3.6vw, 31px)/1.15 var(--display); }
h3 { margin: 18px 0 4px; font: 800 19px/1.2 var(--display); color: var(--green-d); }
p { margin: 8px 0; } ul { padding-left: 22px; margin: 8px 0; } li { margin: 5px 0; } li::marker { color: var(--green); }
.lead { font-size: 19px; }
.muted { color: var(--soft); font-size: 15px; }
.tiles { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-top: 16px; }
.tile { position: relative; padding: 18px 16px 16px; border-radius: 22px; background: var(--cream); border: 2px solid var(--edge); text-align: center; transition: transform .2s; }
.tile:hover { transform: translateY(-4px) rotate(-.6deg); }
.tile img { width: 54px; height: 54px; filter: drop-shadow(0 5px 5px rgba(60, 40, 20, .25)); }
.tile b { display: block; font: 800 18px/1.2 var(--display); margin: 6px 0 4px; } .tile span { font-size: 14.5px; color: var(--soft); line-height: 1.4; display: block; }
.rows { display: grid; gap: 12px; margin-top: 14px; }
.row { display: grid; grid-template-columns: 48px 1fr; gap: 14px; padding: 14px 16px; border-radius: 20px; background: var(--cream); border: 2px solid var(--edge); }
.row img { width: 44px; height: 44px; align-self: center; } .row b { font: 800 17.5px/1.2 var(--display); } .row p { margin: 3px 0 0; font-size: 15.5px; line-height: 1.5; }
.callout { margin: 16px 0 4px; padding: 14px 18px; border-radius: 20px; background: color-mix(in srgb, var(--yellow) 22%, var(--paper)); border: 2px solid var(--yellow); }
.cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; padding: 14px 26px; border: 0; border-radius: 18px; cursor: pointer; text-decoration: none; font: 800 18px/1 var(--display); color: #fff;
  background: var(--c, var(--green-d)); box-shadow: 0 6px 0 color-mix(in srgb, var(--c, var(--green-d)) 62%, #000), 0 14px 22px rgba(60, 40, 20, .25); transition: transform .12s, box-shadow .12s; }
.cta:hover { transform: translateY(2px); box-shadow: 0 4px 0 color-mix(in srgb, var(--c, var(--green-d)) 62%, #000), 0 10px 16px rgba(60, 40, 20, .25); }
.cta:active { transform: translateY(6px); box-shadow: 0 0 0 color-mix(in srgb, var(--c, var(--green-d)) 62%, #000); }
.cta.red { --c: #D8564B; } .cta img { width: 26px; height: 26px; }
input[type=text], input[type=email], input[type=password] { width: 100%; padding: 15px 18px; font: 700 18px/1.2 inherit; font-family: inherit; color: var(--ink); background: var(--cream); border: 3px solid var(--edge); border-radius: 18px; outline: none; transition: border-color .15s, box-shadow .15s; }
input:focus { border-color: var(--green); box-shadow: 0 0 0 5px color-mix(in srgb, var(--green) 30%, transparent); }
label { display: block; margin: 14px 0 6px; font: 800 15px/1 var(--display); color: var(--soft); text-transform: uppercase; letter-spacing: .06em; }
.state { text-align: center; padding: 10px 0 4px; } .state img.big { width: 96px; height: 96px; animation: bob 4s ease-in-out infinite; }
.err { color: #fff; background: #D8564B; padding: 12px 16px; border-radius: 16px; font-weight: 800; }
.ok { color: #1D4F2C; background: #D8F2CF; padding: 12px 16px; border-radius: 16px; font-weight: 800; } @media (prefers-color-scheme: dark) { .ok { color: #D9F5CF; background: #26523A; } }
footer { text-align: center; padding: 6px 16px 50px; color: var(--soft); font-size: 14.5px; } footer a { margin: 0 8px; } footer img { width: 38px; vertical-align: middle; }
.steps { counter-reset: s; list-style: none; padding: 0; } .steps li { counter-increment: s; position: relative; padding: 4px 0 4px 46px; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 2px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 800 16px var(--display); color: #fff; background: var(--green-d); border: 2px solid var(--paper); box-shadow: 0 3px 0 rgba(0, 0, 0, .15); }

/* ------------------------------------------------------------------ motion */
@keyframes drift { from { transform: translateX(0) scale(var(--sc, 1)); } to { transform: translateX(calc(100vw + 480px)) scale(var(--sc, 1)); } }
@keyframes sway { 0%, 100% { transform: rotate(-.9deg); } 50% { transform: rotate(1.1deg); } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-7px) rotate(1.5deg); } }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes twinkle { from { opacity: calc(var(--night) * .55); } to { opacity: var(--night); } }
@keyframes glow { from { transform: scale(.9); } to { transform: scale(1.1); } }
@keyframes flick { from { transform: scale(.94); opacity: .85; } to { transform: scale(1.05); opacity: 1; } }
@keyframes fly { 0%, 100% { transform: translate(0, 0); opacity: .2; } 25% { transform: translate(26px, -30px); opacity: 1; } 50% { transform: translate(-14px, -52px); opacity: .5; } 75% { transform: translate(30px, -18px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }
@media (max-width: 560px) { .paper { padding: 22px 18px 22px; border-radius: 26px; } .badge { width: 48px; height: 48px; } .badge img { width: 30px; height: 30px; } .sun, .moon { width: 80px; height: 80px; right: 8%; }
  .hero h1 { -webkit-text-stroke: 5px #6B4A3C; } .row { grid-template-columns: 40px 1fr; padding: 12px; } .tree-b, .house, .mill { display: none; } }

/* ------------------------------------------------------------------ top bar: back to the home page + language switch (all public pages) */
.scene > .topnav { top: 14px; left: 14px; right: 14px; z-index: 8; display: flex; justify-content: space-between; align-items: center; gap: 10px; pointer-events: none; }
.topnav > * { pointer-events: auto; }
.homelink, .langsw { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; background: color-mix(in srgb, var(--paper) 90%, transparent); border: 3px solid var(--edge); box-shadow: 0 6px 14px rgba(60, 40, 20, .2); backdrop-filter: blur(6px); }
.homelink { padding: 5px 16px 5px 8px; text-decoration: none; color: var(--ink); font: 800 16px/1 var(--display); transition: transform .15s; }
.homelink img { width: 28px; height: 28px; } .homelink:hover { transform: translateY(-2px); }
.langsw { padding: 3px; font: 800 14px/1 var(--display); }
.langsw a { display: block; padding: 8px 14px; border-radius: 999px; text-decoration: none; color: var(--soft); transition: background-color .2s, color .2s; }
.langsw a:hover { color: var(--ink); }
.langsw a.on { background: var(--green-d); color: #fff; } @media (prefers-color-scheme: dark) { .langsw a.on { color: #10281a; } }
@media (max-width: 560px) { .scene > .topnav { top: 10px; left: 10px; right: 10px; } .homelink { font-size: 14px; padding-right: 12px; } .langsw a { padding: 7px 11px; } }