/* =====================================================================
   « Carnet du druide » — l'identité visuelle de The Wisdom Tree
   Papier crème, trait d'encre réglisse, bois clair, feuilles et miel.
   Polices locales (dossier fonts/, licences OFL) : Grandstander (titres), Andika (texte, très lisible).
   ===================================================================== */
@font-face{font-family:Grandstander;src:url(../fonts/grandstander-latin.woff2) format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Grandstander;src:url(../fonts/grandstander-latin-ext.woff2) format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Andika;src:url(../fonts/andika-400-latin.woff2) format('woff2');font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Andika;src:url(../fonts/andika-400-latin-ext.woff2) format('woff2');font-weight:400;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Andika;src:url(../fonts/andika-700-latin.woff2) format('woff2');font-weight:700 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Andika;src:url(../fonts/andika-700-latin-ext.woff2) format('woff2');font-weight:700 900;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --ink:#3B1F3A; --ink2:#5b3a55; --paper:#FFF3E4; --paper2:#F6E2C4; --paper3:#EBCFA6;
  --honey:#FFB627; --honey2:#E8920F; --berry:#EF476F; --berry2:#B8264B; --mint:#4FD1B0; --mint2:#2A9C80;
  --violet:#8D6CE0; --sap:#7CC243; --sap2:#4E9A2A; --bark:#8A5A32; --barkd:#5E3A1E; --leaf:#2F8F4A;
  --r-a:28px 36px 24px 32px / 32px 24px 36px 28px;   /* coins irréguliers, comme découpés à la main */
  --r-b:18px 24px 16px 22px / 22px 16px 24px 18px;
  --r-c:14px 18px 12px 16px / 16px 12px 18px 14px;
  --paper-tex:radial-gradient(circle at 18% 22%,#ffffff99 0 1.5px,transparent 2px),radial-gradient(circle at 72% 64%,#e8c99a55 0 1.5px,transparent 2px),repeating-linear-gradient(97deg,#00000005 0 2px,transparent 2px 7px),linear-gradient(170deg,#FFF7EC,#FBEBD3 60%,#F4DDBA);
  --wood:repeating-linear-gradient(88deg,#ffffff10 0 3px,transparent 3px 11px),repeating-linear-gradient(92deg,#00000012 0 1px,transparent 1px 17px),linear-gradient(180deg,#C98E52,#A86E3A);
  --shadow:0 6px 0 var(--barkd),0 18px 34px #2a10201f,0 26px 50px #2a102040;
}
html,body{font-family:Andika,"Trebuchet MS",sans-serif}
button,input,kbd{font-family:inherit}
.ic{display:inline-block;width:1.18em;height:1.18em;vertical-align:-0.24em;overflow:visible}
.icw{display:inline}

/* ---------- le fond derrière les panneaux : une ombre chaude et floue (plus de violet) ---------- */
#overlay{background:radial-gradient(ellipse at 50% 45%,#2a142400,#2a1424a6 75%)!important;color:var(--ink)}
#overlay:has(.creator),#overlay:has(.pausecard),#overlay:has(.endcard),#overlay:has(.powercard),#overlay:has(.confirmcard),#overlay:has(.firstrun),#overlay:has(.map){background:#2a1424a0!important;backdrop-filter:blur(6px) saturate(.9);-webkit-backdrop-filter:blur(6px) saturate(.9)}

/* ---------- titres : Grandstander, vert sève cerné d'encre ---------- */
#overlay h1,.welcome .ltitle,.pc-top,.ec-title,#msg{font-family:Grandstander,sans-serif;font-weight:900;color:var(--sap);-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:0 4px 0 var(--ink),0 8px 18px #2a102055!important;letter-spacing:1px}
#overlay h1.small,.ptitle{font-size:clamp(30px,5vw,46px)!important}
#msg{color:var(--honey);-webkit-text-stroke:3px var(--ink);text-shadow:0 5px 0 var(--ink)!important}

/* ---------- les panneaux : papier du carnet, coins irréguliers, couture pointillée ---------- */
.creator,.firstrun,.pausecard,.endcard,.powercard,.confirmcard,.shop{position:relative;background:var(--paper-tex)!important;color:var(--ink)!important;border:4px solid var(--ink)!important;border-radius:var(--r-a)!important;box-shadow:var(--shadow)!important}
.creator::before,.firstrun::before,.pausecard::before,.endcard::before,.powercard::before,.confirmcard::before,.shop::before{content:"";position:absolute;inset:9px;border:2px dashed #3B1F3A33;border-radius:var(--r-a);pointer-events:none}
.endcard.over{border-color:var(--berry2)!important}
.pgroup,.crrow,.keys,.settings,.pc-keys,.world{background:#ffffff9c!important;border:2px solid #3B1F3A2e;border-radius:var(--r-b)!important;color:var(--ink)}
.pgroup>b{color:var(--ink2);opacity:1}
.crrow.on{border:3px solid var(--honey2)!important;background:#FFE9C2!important}
.story,.pc-say,.ec-msg,.pc-sub,.ec-sub,.pc-morph,.slothelp,.frsoon{color:var(--ink)}

/* ---------- boutons : planchettes de miel cernées d'encre ---------- */
button{font-family:Grandstander,sans-serif!important;font-weight:800;background:var(--honey)!important;color:var(--ink)!important;border:3px solid var(--ink)!important;border-radius:var(--r-b)!important;box-shadow:0 5px 0 var(--ink)!important;letter-spacing:.3px}
button:active{box-shadow:0 2px 0 var(--ink)!important}
button.danger,.menu button.danger,.pbtns button.danger{background:var(--berry)!important;color:#fff!important}
button.soft,.pbtns button.soft,.ec-btns button.ghost{background:var(--paper2)!important;color:var(--ink)!important}
kbd{background:var(--paper)!important;color:var(--ink)!important;border:2px solid var(--ink)!important;border-radius:7px!important;box-shadow:0 2px 0 var(--ink);padding:0 7px!important}
.pbtn{background:var(--paper)!important;border-color:var(--ink)!important}

/* ---------- choix (options, onglets, pastilles) ---------- */
.opt,.crtx,.tab,.age,.crname,.crsex,.crbas,.basbtn,.schips > span,.ec-chips > span{background:var(--paper2)!important;color:var(--ink)!important;border:2px solid var(--ink)!important;border-radius:var(--r-c)!important;box-shadow:0 2px 0 #3B1F3A55}
.opt.sel,.crtx.sel,.tab.on,.age.sel,.crname.sel,.crsex.sel,.crbas.sel,.ec-chips > span.gold{background:var(--honey)!important;color:var(--ink)!important;box-shadow:0 0 0 3px #fff,0 0 0 5px var(--ink)}
.crsw{border:3px solid var(--ink)!important}.crsw.sel{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--ink)!important}
.crth{background:var(--paper2)!important;border:2px solid #3B1F3A44!important;border-radius:var(--r-c)!important}
.crth.sel{border:3px solid var(--ink)!important;background:var(--honey)!important}
.crth small{color:var(--ink);opacity:1}
.crpv{border:3px solid var(--ink);border-radius:var(--r-b)!important;background:radial-gradient(#fffaf0,#ffe6bd 70%,#f5c98a)!important}
.crpvname{font-family:Grandstander,sans-serif!important;color:var(--ink)!important}
.creator .crlab{font-size:24px}
#crName,.creator #crName{background:#fff!important;color:var(--ink)!important;border:3px solid var(--ink)!important;border-radius:var(--r-c)!important;font-family:Andika,sans-serif!important}
.frcard{background:var(--paper2)!important;color:var(--ink)!important;border:3px solid #3B1F3A55!important;border-radius:var(--r-b)!important}
.frcard.sel{background:var(--honey)!important;border:4px solid var(--ink)!important;box-shadow:0 6px 0 var(--ink)}
.frcard .frico .ic{width:1.1em;height:1.1em}
.frdots i{background:#3B1F3A33!important}.frdots i.on{background:var(--ink)!important}
.frstep .ic{width:1em;height:1em}

/* ---------- boîtes de dialogue : confirmation et question pour les grands ---------- */
.confirmcard{width:min(560px,100%);padding:22px clamp(16px,3vw,30px) 18px}
.confirmcard .cfico .ic{width:64px;height:64px}
.confirmcard .story{font-size:19px;font-weight:700;line-height:1.5}
.confirm{gap:16px!important}
.cbtn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px!important;border-radius:var(--r-b)!important;background:var(--paper2)!important;color:var(--ink)!important;border:3px solid var(--ink)!important;box-shadow:0 4px 0 var(--ink);font-family:Grandstander,sans-serif;font-size:20px!important}
.cbtn.sel{background:var(--mint)!important;transform:translateY(-3px) rotate(-1deg);box-shadow:0 7px 0 var(--ink),0 0 0 4px #fff,0 0 0 6px var(--ink)!important}
.cbtn.danger{background:#FFD3DC!important;color:var(--berry2)!important}
.cbtn.danger.sel{background:var(--berry)!important;color:#fff!important}
.cbtn .ic{width:26px;height:26px}

/* ---------- accueil ---------- */
#overlay:has(.welcome){background:radial-gradient(ellipse at 50% 30%,#0000 0%,#0000 40%,#2a142488 100%),linear-gradient(to bottom,#2a142433 0%,#0000 30%,#0000 55%,#2a1424cc 100%)!important}
.welcome .logo{gap:clamp(10px,2vw,22px)}
.welcome .lemma{display:inline-flex;align-items:center;justify-content:center;width:clamp(70px,9vw,112px)!important;height:clamp(70px,9vw,112px)!important;border-radius:var(--r-a)!important;background:var(--paper-tex)!important;border:4px solid var(--ink)!important;box-shadow:0 6px 0 var(--ink),0 14px 30px #2a102066!important;padding:6px}
.welcome .ltitle{font-size:clamp(40px,6.4vw,84px)!important;line-height:.95;-webkit-text-stroke:3px var(--ink);text-shadow:0 6px 0 var(--ink),0 14px 26px #2a102077!important}
.welcome .ltitle span{color:var(--sap)}
.welcome .ltitle span.w2{color:var(--honey)}
.welcome .lsub{background:var(--paper)!important;color:var(--ink)!important;border:3px solid var(--ink);border-radius:var(--r-b)!important;box-shadow:0 4px 0 var(--ink)!important;font-family:Grandstander,sans-serif;font-weight:800;transform:rotate(-1.5deg)}
.welcome .tagline{background:var(--paper)!important;color:var(--ink)!important;border:2px solid var(--ink);border-radius:var(--r-b)!important;backdrop-filter:none!important;max-width:min(92vw,820px);white-space:normal;box-shadow:0 3px 0 var(--ink)}
.welcome .spiritsrow > span{background:var(--paper)!important;border:3px solid var(--ink)!important;box-shadow:0 3px 0 var(--ink);backdrop-filter:none!important}
.welcome .spiritsrow .ic{width:1.05em;height:1.05em}
.spiritsrow .unmet{filter:none!important;background:#3B1F3A40!important;border-style:dashed!important}
.spiritsrow .unmet .ic{filter:brightness(0) opacity(.55)}
.welcome .slot{background:var(--paper-tex)!important;color:var(--ink)!important;border:3px solid var(--ink)!important;border-radius:var(--r-a)!important;backdrop-filter:none!important;box-shadow:0 6px 0 var(--ink),0 16px 30px #2a102055!important}
.welcome .slot.sel{background:linear-gradient(170deg,#FFE7A8,var(--honey))!important;transform:translateY(-8px) rotate(-1deg) scale(1.05);box-shadow:0 8px 0 var(--ink),0 0 0 5px #fff,0 0 0 8px var(--ink),0 22px 40px #2a102066!important}
.welcome .slot.empty{background:#fff3e4cc!important;border:3px dashed var(--ink)!important}
.welcome .slot.empty.sel{background:linear-gradient(170deg,#D8F6EC,var(--mint))!important;border:3px solid var(--ink)!important}
.welcome .slot.empty.sel .sgo,.welcome .slot.sel .sgo{background:var(--ink)!important;color:var(--paper)!important}
.welcome .slot .sgo{background:var(--paper2)!important;border:2px solid var(--ink);border-radius:var(--r-c)!important;font-family:Grandstander,sans-serif}
.welcome .slot .sname,.welcome .slot .snew{font-family:Grandstander,sans-serif}
.welcome .slot .sbar{background:#3B1F3A22!important;border:2px solid var(--ink);box-shadow:none!important}
.welcome .slot .sbar i{background:linear-gradient(90deg,var(--sap),var(--honey))!important}
.welcome .slot .sfin{background:var(--sap)!important;border:2px solid var(--ink);color:var(--ink)!important}
.welcome .slot .sico .ic{width:52px;height:52px}
.welcome .slot .splus{color:var(--ink);font-family:Grandstander,sans-serif}
.welcome .slothelp{color:var(--paper);text-shadow:0 1px 2px #2a1024}
.langpick .lp{background:var(--paper)!important;border:3px solid var(--ink)!important;border-radius:var(--r-c)!important;box-shadow:0 3px 0 var(--ink)}
.langpick .lp.sel{background:var(--honey)!important}
.langpick .lp .ic{width:34px;height:34px;vertical-align:middle}
.funfact{background:var(--paper-tex)!important;color:var(--ink)!important;border:3px solid var(--ink)!important;border-radius:var(--r-b)!important;box-shadow:0 4px 0 var(--ink)!important}
@media (max-height:500px){.welcome .tagline{font-size:13px;padding:4px 12px;margin:4px auto}.welcome .ltitle{font-size:clamp(34px,6.4vw,60px)!important}.welcome .lemma{width:62px!important}}

/* ---------- HUD : étiquettes de papier cernées d'encre ---------- */
#hud{gap:10px!important;font-family:Grandstander,sans-serif;text-shadow:none!important;color:var(--ink)!important}
#hud > span:not(:empty){background:var(--paper-tex);border:3px solid var(--ink);border-radius:var(--r-c);box-shadow:0 3px 0 var(--ink);padding:2px 12px;font-size:21px}
#hud .ic{width:1.05em;height:1.05em}
.f{background:var(--paper)!important;border:3px solid var(--ink);border-radius:var(--r-c)!important;box-shadow:0 3px 0 var(--ink)}
.f.cur{background:var(--honey)!important;box-shadow:0 0 0 3px #fff,0 0 0 5px var(--ink)!important}
.f i{color:var(--ink)!important;font-family:Grandstander,sans-serif}
.f.lock{opacity:.6}

/* ---------- bulles : le papier du carnet, le nom sur une petite étiquette de bois ---------- */
#talk{background:var(--paper-tex)!important;color:var(--ink)!important;border:3px solid var(--ink)!important;border-radius:var(--r-a)!important;box-shadow:0 5px 0 var(--ink),0 14px 28px #2a102055!important}
#talk img{border:3px solid var(--ink);background:var(--paper2)!important}
#talk b{display:inline-block;background:var(--wood);color:var(--paper)!important;border:2px solid var(--ink);border-radius:8px 12px 7px 11px;padding:1px 10px;font-family:Grandstander,sans-serif;transform:rotate(-1.5deg)}
#talk p{font-family:Andika,sans-serif}
#talk.story{background:linear-gradient(170deg,#F8E9CF,#EED6AE)!important;color:var(--ink)!important;border-color:var(--ink)!important}
#hint{background:var(--paper-tex)!important;color:var(--ink)!important;border:3px solid var(--ink);border-radius:var(--r-b)!important;box-shadow:0 4px 0 var(--ink),0 10px 20px #2a102044!important;font-family:Andika,sans-serif}

/* ---------- pause, cabane, fin de niveau, cérémonie ---------- */
.pbtns small{color:var(--ink)}
.plab{color:var(--ink)}
.shop .pv,.shop .ocimg{background:radial-gradient(circle at 50% 40%,#FFF7EA,#F1D7AC 75%)!important;border:3px solid var(--ink);border-radius:var(--r-b)!important}
.shop .pvname{color:var(--ink)!important;text-shadow:0 1px 0 #fff!important;font-family:Grandstander,sans-serif}
.shop .oc,.shop .fig,.shop .lvl{background:var(--paper2)!important;color:var(--ink)!important;border:2px solid #3B1F3A55!important;border-radius:var(--r-b)!important}
.shop .oc.sel{border:3px solid var(--ink)!important;background:#FFE9C2!important;box-shadow:0 5px 0 var(--ink)}
.shop .oc.on{box-shadow:0 0 0 3px var(--sap) inset!important}
.shop .oc.spirit{background:#E2F5D2!important}
.shop .oc.close{background:#FFD3DC!important}
.shop h2,.shop .smsg,.shop .wallet{color:var(--ink)}
.ec-level{background:var(--wood)!important;color:var(--paper)!important;border:2px solid var(--ink);border-radius:var(--r-c)!important;box-shadow:0 3px 0 var(--ink)!important;font-family:Grandstander,sans-serif}
.ec-emma img{background:var(--paper)!important;border:4px solid var(--ink)!important;box-shadow:0 5px 0 var(--ink)!important}
.ec-seeds > span{background:#3B1F3A14!important;border:2px dashed #3B1F3A55!important}
.ec-seeds > span.on{background:#FFE6A8!important;border:2px solid var(--ink)!important;box-shadow:0 0 12px var(--honey)!important}
.ec-fin{color:var(--sap2)!important;text-shadow:none!important;font-family:Grandstander,sans-serif}
.ec-fin small{color:var(--ink)!important}
.pc-top{color:var(--honey)!important}
.pc-ico{background:var(--paper)!important;border:4px solid var(--ink)!important;box-shadow:0 5px 0 var(--ink)!important}
.pc-name{font-family:Grandstander,sans-serif;color:var(--ink)}
.pc-demo{border:3px solid var(--ink)!important;border-radius:var(--r-b)!important}
.pc-rec{background:var(--berry)!important;border:2px solid var(--ink);color:#fff}
.pc-back{background:#E2F5D2!important;border:2px solid var(--ink);color:var(--ink)}
.world{color:var(--ink)}.lv{background:var(--paper2)!important;border:3px solid var(--ink)!important;color:var(--ink)!important;border-radius:var(--r-b)!important}.lv.sel{background:var(--honey)!important}
.lv b{color:var(--berry2)!important}.lv.lock{opacity:.55}

/* ---------- commandes tactiles : galets de couleur cernés d'encre ---------- */
.tb{border:4px solid var(--ink)!important;box-shadow:0 6px 0 var(--ink),0 10px 18px #2a102055!important}
.tb .ic{width:1em;height:1em;vertical-align:middle}
.tjump{background:radial-gradient(circle at 35% 30%,#B7EE8A,var(--sap) 60%,var(--sap2))!important}
.tact{background:radial-gradient(circle at 35% 30%,#FFC2D1,var(--berry) 60%,var(--berry2))!important}
.tuse{background:radial-gradient(circle at 35% 30%,#C9F4EA,var(--mint) 60%,var(--mint2))!important}
.tform{background:radial-gradient(circle at 35% 30%,#D9CCFA,var(--violet) 65%,#5E44B0)!important}
.tpause{background:var(--paper)!important}
.tring{border:4px solid var(--ink)!important;background:radial-gradient(#fff3e470,#fff3e430 65%,#fff3e400)!important;box-shadow:none!important}
.tknob{background:radial-gradient(circle at 35% 30%,#fff,var(--honey))!important;border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink)!important}
.tstick.run .tring{border-color:var(--honey2)!important}
.tbtn{background:var(--paper)!important;border-color:var(--ink)!important;color:var(--ink)}

.welcome .lemma .ic{width:100%;height:100%;vertical-align:0}
.icw{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important;border-radius:0!important;min-width:0!important;transform:none!important}
.welcome .logo{padding-right:clamp(0px,14vw,200px);padding-left:clamp(0px,2vw,20px)}
@media (max-width:900px){.welcome .logo{padding-right:150px}}
.tb{border-radius:50%!important;font-family:inherit!important}
.tpause{top:calc(max(8px,env(safe-area-inset-top)) + 62px)!important;left:auto!important;right:max(14px,env(safe-area-inset-right))!important;transform:none!important}
.tpause.on{transform:scale(.9)!important}
@media (max-width:900px){.welcome .ltitle{font-size:clamp(34px,5.6vw,56px)!important}.langpick .lp{padding:3px 5px!important}.langpick .lp .ic{width:26px;height:26px}}