/* Donjons & Definitions : styles partages par le jeu (jouer.html, donjons.html). */
:root{
  --paper:#FAF9F5; --panel:#FFFFFF; --ink:#1C1B19; --muted:#74706A;
  --line:#E7E1D5; --accent:#7C1D2E; --accent-weak:#F4E7E9; --accent-ink:#5E1522;
  --sun:#F2C14E; --sun-weak:#FBEFC9;
  --mono:"SF Mono",ui-monospace,"JetBrains Mono",Menlo,Consolas,monospace;
  --serif:Iowan Old Style,Palatino,"Palatino Linotype",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
/* neutralise le double-tap-pour-zoomer de Safari (frappe rapide au clavier) */
html{touch-action:manipulation}
body{background:var(--paper); color:var(--ink); font-family:var(--sans); -webkit-text-size-adjust:100%}
.wrap{max-width:1040px; margin:0 auto; padding:16px 16px 40px}

header{display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--line); padding-bottom:12px; margin-bottom:16px}
.brand{display:flex; align-items:center; gap:9px; min-width:0}
a.brand{text-decoration:none; color:inherit}
.mark{width:26px; height:26px; flex:none}
h1{font-size:19px; letter-spacing:-.02em; margin:0; font-weight:700; white-space:nowrap}
.date{font-family:var(--serif); font-size:13.5px; color:var(--muted); text-transform:capitalize}
.spacer{flex:1}
.meta{display:flex; align-items:center; gap:12px}
.timer{font-family:var(--mono); font-size:15px; color:var(--accent-ink); font-weight:600; font-variant-numeric:tabular-nums}
.mode{font-size:12px; color:var(--muted)}

.layout{display:flex; flex-direction:column; align-items:center; gap:18px}
.gridarea{display:flex; align-items:center; justify-content:center; width:100%}

/* grille (plan de donjon : sol parchemin, ombre interieure grisee) */
.board{position:relative; touch-action:manipulation; user-select:none; -webkit-user-select:none}
.cell{position:absolute; background:#FCFBF7; box-shadow:inset 1.5px 1.5px 3px rgba(26,23,18,.11), inset -1px -1px 1.5px rgba(26,23,18,.03); display:flex; align-items:flex-end; justify-content:center; cursor:pointer; overflow:hidden}
.cell .num{position:absolute; top:1px; left:2.5px; font-family:var(--mono); font-weight:600; color:var(--accent); line-height:1}
.cell .ch{font-family:var(--mono); font-weight:600; color:var(--ink); line-height:1; padding-bottom:2px}
/* fonds, du moins prioritaire au plus prioritaire : word (mot courant) puis
   here (case active), puis solved (mot donne) et ok (mot valide). Ainsi un mot
   valide vire au vert (et un mot donne au rouge) des la derniere lettre, meme
   s'il est encore selectionne. */
.cell.word{background:var(--sun-weak)}
.cell.here{background:var(--sun)}
.cell.solved{background:#F7DEDE}
.cell.ok{background:#EAF3E9}
.cell.ok .ch{color:#1E7A43}
/* lettre donnee (indice ou solution) : rouge, prioritaire sur le vert d'un mot valide */
.cell.given .ch{color:#C0392B; font-weight:700}
.board.done .cell{background:#EAF3E9}
.grid-svg{position:absolute; top:0; left:0; pointer-events:none}

/* barre de definition */
.cluebar{display:flex; align-items:center; gap:10px; width:100%; max-width:620px; background:var(--panel); border:1px solid var(--line); border-radius:11px; padding:10px 12px}
.cluebar .arrow{flex:none; width:40px; height:40px; border:1px solid var(--line); border-radius:9px; background:var(--panel); font-size:19px; color:var(--accent-ink); cursor:pointer; display:flex; align-items:center; justify-content:center}
.cluebar .arrow:active{background:var(--accent-weak)}
.cluebar .txt{flex:1; min-width:0; font-family:var(--serif); font-size:15.5px; line-height:1.35}
.cluebar .txt .dir{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; display:block; margin-bottom:1px}

/* listes (ordinateur) */
.aside{width:100%; max-width:760px}
.cols{display:flex; gap:22px}
.cols > div{flex:1; min-width:0}
h2{font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin:0 0 8px; font-family:var(--mono)}
ol{list-style:none; margin:0; padding:0}
ol li{display:flex; gap:8px; padding:5px 8px; border-radius:7px; font-family:var(--serif); font-size:14px; line-height:1.4; cursor:pointer; color:#2c2a26}
ol li .ln{font-family:var(--mono); font-weight:600; color:var(--accent); min-width:20px; text-align:right; font-size:12.5px}
ol li:hover{background:#F3EEE4}
ol li.on{background:var(--sun-weak)}
ol li.filled{color:var(--muted)}

.tools{display:flex; gap:8px; flex-wrap:wrap; justify-content:center}
button.tool{font-family:var(--sans); font-size:13px; padding:7px 12px; border:1px solid var(--line); border-radius:9px; background:var(--panel); color:var(--ink); cursor:pointer}
button.tool:hover{border-color:#d8cfbe}

/* clavier integre (masque sur ordinateur) */
.kbd{display:none; flex-direction:column; gap:6px; width:100%; max-width:560px; touch-action:none}
.kbd .krow{display:flex; gap:5px; justify-content:center}
.kbd .key{flex:1 1 0; max-width:44px; height:46px; display:flex; align-items:center; justify-content:center; background:var(--panel); border:1px solid var(--line); border-radius:8px; font-family:var(--sans); font-size:18px; font-weight:600; color:var(--ink); cursor:pointer; user-select:none; -webkit-user-select:none; touch-action:none}
.kbd .key:active{background:var(--sun)}
.kbd .key.wide{flex:1.7 1 0; max-width:72px; font-size:20px; color:var(--accent-ink)}

.banner{display:none; background:#EAF3E9; border:1px solid #BFD9BB; color:#2c4a2a; border-radius:11px; padding:12px 16px; font-family:var(--serif); font-size:15px; text-align:center; width:100%; max-width:560px}
.banner.show{display:block}
.banner b{font-weight:700}
.banner-home{display:inline-block; margin-left:8px; font-weight:700; color:var(--accent-ink)}

.stamp{margin-top:22px; font-size:11px; color:#b3ab9c; text-align:center; font-family:var(--mono)}

/* ---- ecran de connexion (donjons.html) ---- */
#authGate{position:fixed; inset:0; z-index:50; background:var(--paper); display:flex; align-items:center; justify-content:center; padding:22px}
#authGate[hidden]{display:none}
.gate-card{background:var(--panel); border:1px solid var(--line); border-radius:14px; box-shadow:0 1px 3px rgba(30,27,20,.05); padding:28px 28px; max-width:400px; width:100%; text-align:center; display:flex; flex-direction:column; gap:12px; align-items:stretch}
.gate-card .mark{width:40px; height:40px; margin:0 auto}
.gate-card h2{margin:0; font-size:20px; letter-spacing:-.02em; text-align:center}
.gate-text{margin:0 0 2px; font-family:var(--serif); font-size:14px; color:#3a3833; line-height:1.5; text-align:center}
.gate-btn{font-family:var(--sans); font-size:14.5px; padding:11px 14px; border-radius:10px; border:1px solid var(--line); background:var(--panel); color:var(--ink); cursor:pointer; font-weight:600}
.gate-btn.primary{background:var(--accent); border-color:var(--accent); color:#fff}
.gate-btn:disabled{opacity:.55; cursor:default}
.gate-sep{display:flex; align-items:center; gap:10px; color:var(--muted); font-size:12px; margin:2px 0}
.gate-sep::before,.gate-sep::after{content:""; flex:1; height:1px; background:var(--line)}
.gate-field{font-family:var(--sans); font-size:16px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; width:100%; background:var(--panel); color:var(--ink)}
.gate-row{display:flex; gap:8px}
.gate-row .gate-btn{flex:1}
.gate-status{margin:0; font-size:12.5px; color:var(--muted); min-height:1.1em}
.gate-status.warn{color:var(--accent)}
.streak{display:inline-flex; align-items:center; gap:4px; font-size:13px; font-weight:700; color:var(--accent-ink); background:var(--accent-weak); border-radius:999px; padding:3px 10px 3px 8px}
.streak[hidden]{display:none}
.streak svg{width:12px; height:14px; flex:none}
.acct{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted)}
.acct button{font-size:12px; padding:4px 8px; border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--ink); cursor:pointer}

/* ---- classement (bouton d'entete + fenetre) ---- */
.hdr-btn{display:inline-flex; align-items:center; gap:6px; background:none; border:1px solid var(--line); border-radius:999px; padding:4px 12px; cursor:pointer; color:var(--ink); font-size:12.5px; font-weight:600}
.hdr-btn[hidden]{display:none}
.hdr-btn:hover{border-color:#d8cfbe}
#boardModal{position:fixed; inset:0; z-index:60; background:rgba(28,27,20,.4); display:flex; align-items:center; justify-content:center; padding:18px}
#boardModal[hidden]{display:none}
.lb-card{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:22px; width:100%; max-width:420px; max-height:88vh; overflow:auto; display:flex; flex-direction:column; gap:14px}
.lb-card h2{margin:0; font-size:18px; letter-spacing:-.02em}
.lb-tabs{display:flex; gap:8px}
.lb-tab{flex:1; font-family:var(--sans); font-size:13.5px; padding:8px 10px; border:1px solid var(--line); border-radius:9px; background:var(--panel); color:var(--muted); cursor:pointer}
.lb-tab.on{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600}
.lb-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px}
.lb-list li{display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:9px; font-size:14px}
.lb-list li.me{background:var(--accent-weak)}
.lb-rank{font-family:var(--mono); font-weight:700; color:var(--accent); min-width:24px; text-align:right; font-size:13px}
.lb-av{width:26px; height:26px; font-size:12px}
.lb-name{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--serif)}
.lb-xp{font-family:var(--mono); font-weight:600; color:var(--accent-ink); font-size:13px; flex:none}
.lb-empty{color:var(--muted); font-style:italic; font-family:var(--serif); font-size:13.5px; padding:8px; text-align:center}
.lb-status{font-size:12.5px; color:var(--muted); min-height:1em; margin:0; text-align:center}

/* ---- profil (avatar, pseudo, historique) ---- */
.acct-btn{display:inline-flex; align-items:center; gap:7px; background:none; border:1px solid var(--line); border-radius:999px; padding:3px 11px 3px 3px; cursor:pointer; color:var(--ink); font-size:12.5px; font-weight:600; max-width:170px}
.acct-btn[hidden]{display:none}
.acct-btn .pseudo{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.avatar{width:26px; height:26px; border-radius:50%; background:var(--accent-weak); color:var(--accent-ink); display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; overflow:hidden; flex:none}
.avatar img{width:100%; height:100%; object-fit:cover; display:block}

#profileModal{position:fixed; inset:0; z-index:60; background:rgba(28,27,20,.4); display:flex; align-items:center; justify-content:center; padding:18px}
#profileModal[hidden]{display:none}
.profile-card{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:22px; width:100%; max-width:420px; max-height:88vh; overflow:auto; display:flex; flex-direction:column; gap:14px}
.profile-card h2{margin:0; font-size:18px; letter-spacing:-.02em}
.profile-top{display:flex; align-items:center; gap:16px}
.profile-top .avatar{width:72px; height:72px; font-size:28px}
.profile-fields{display:flex; flex-direction:column; gap:5px; flex:1; min-width:0}
.profile-fields label{font-size:12px; color:var(--muted)}
.profile-fields input{font-family:var(--sans); font-size:16px; padding:9px 11px; border:1px solid var(--line); border-radius:10px; background:var(--panel); color:var(--ink)}
.avatar-actions{display:flex; gap:12px; align-items:center; font-size:13px; margin-top:3px}
.linklike{background:none; border:none; color:var(--accent); cursor:pointer; font-size:13px; padding:0; text-decoration:underline}
.pstatus{font-size:12.5px; color:var(--muted); min-height:1em}
.pstatus.warn{color:var(--accent)}
.profile-row{display:flex; gap:8px}
.profile-row .gate-btn{flex:1}
.hist h3{font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); font-family:var(--mono); margin:6px 0 8px}
.hist ul{list-style:none; margin:0; padding:0; max-height:210px; overflow:auto}
.hist li{display:flex; justify-content:space-between; gap:10px; padding:6px 0; border-bottom:1px solid var(--line); font-family:var(--serif); font-size:14px}
.hist li .t{font-family:var(--mono); color:var(--muted); font-size:12.5px; flex:none}
.hist .empty{color:var(--muted); font-style:italic; font-family:var(--serif); font-size:13.5px}
/* ---- niveau (profil), echelle facon jeu de role ---- */
.level{border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:linear-gradient(180deg,#ffffff,#fbf6ef); margin-bottom:4px}
.level[hidden]{display:none}
.level-head{display:flex; align-items:center; gap:11px}
.level-rank{flex:none; width:38px; height:38px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-weight:700; font-size:16px}
.level-txt{min-width:0}
.level-title{font-family:var(--serif); font-size:16px; font-weight:700; color:var(--accent-ink); line-height:1.15}
.level-xp{font-family:var(--mono); font-size:12px; color:var(--muted)}
.level-xp b{color:var(--accent-ink); font-weight:700; font-size:13px}
.level-bar{height:8px; border-radius:999px; background:var(--accent-weak); overflow:hidden; margin:10px 0 6px}
.level-fill{height:100%; background:var(--accent); border-radius:999px; transition:width .4s ease}
.level-next{font-family:var(--serif); font-size:12.5px; color:var(--muted)}

/* ---- page d'accueil (accueil.html) ---- */
.home{display:flex; flex-direction:column; gap:18px}
.who{display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); border-radius:999px; padding:3px 11px 3px 3px; color:var(--ink); font-size:12.5px; font-weight:600; max-width:180px}
.who .pseudo{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hero{display:flex; gap:18px; flex-wrap:wrap; align-items:center; background:linear-gradient(180deg,#ffffff,#fbf6ef); border:1px solid var(--line); border-radius:16px; padding:22px 24px}
.hero-main{flex:1 1 260px; min-width:0}
.hero-label{font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent)}
.hero-date{font-family:var(--serif); font-size:18px; color:var(--ink); text-transform:capitalize; margin:2px 0 14px}
.play-btn{display:inline-block; background:var(--accent); color:#fff; font-weight:700; font-size:16px; padding:12px 28px; border-radius:11px; text-decoration:none}
.play-btn:hover{background:var(--accent-ink)}
.hero-state{font-family:var(--serif); font-size:13.5px; color:var(--muted); margin-top:11px}
.hero-state.ok{color:#1E7A43}
.hero-count{flex:0 0 auto; text-align:center; padding-left:10px; border-left:1px solid var(--line)}
.count-label{font-size:11px; color:var(--muted); font-family:var(--mono); text-transform:uppercase; letter-spacing:.08em}
.count-val{font-family:var(--mono); font-size:26px; font-weight:700; color:var(--accent-ink); font-variant-numeric:tabular-nums; margin-top:3px}
.home-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.stat{border:1px solid var(--line); border-radius:12px; padding:12px 8px; text-align:center; background:var(--panel)}
.stat-k{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.stat-v{font-family:var(--serif); font-size:24px; font-weight:700; color:var(--accent-ink); line-height:1.1; margin:3px 0}
.stat-s{font-size:11.5px; color:var(--muted)}
.archive h2{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); font-family:var(--mono); margin:4px 0 10px}
.grid-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.gl-item a{display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; text-decoration:none; color:var(--ink); background:var(--panel)}
.gl-item a:hover{border-color:#d8cfbe; background:#fbf7f0}
.gl-mark{flex:none; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px}
.gl-item.done .gl-mark{background:#EAF3E9; color:#1E7A43}
.gl-item.todo .gl-mark{background:var(--accent-weak); color:var(--accent)}
.gl-txt{flex:1; min-width:0; display:flex; flex-direction:column}
.gl-title{font-family:var(--serif); font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.gl-date{font-size:11.5px; color:var(--muted); text-transform:capitalize}
.gl-tag{flex:none; font-family:var(--mono); font-size:11px; color:var(--muted)}
.gl-item.done .gl-tag{color:#1E7A43}
.gl-empty{color:var(--muted); font-style:italic; font-family:var(--serif); font-size:13.5px; padding:8px}
.home-foot{text-align:center; margin-top:4px}

/* ---- mobile : trois zones fixes, aucune barre systeme, aucun defilement ---- */
@media (max-width:859px){
  html,body{height:100%; overflow:hidden; overscroll-behavior:none}
  .wrap{max-width:none; height:100dvh; padding:6px 6px 0; display:flex; flex-direction:column; gap:7px}
  /* la page d'accueil defile normalement (ce n'est pas le jeu plein ecran) */
  html:has(.page-accueil), body.page-accueil{height:auto; min-height:100%; overflow:visible}
  .wrap.home{height:auto; overflow:visible; padding:8px 10px 34px; gap:14px}
  .home .date{display:block}
  .home-stats{grid-template-columns:repeat(2,1fr)}
  .hero{padding:16px 18px}
  .hero-count{padding-left:0; border-left:none; border-top:1px solid var(--line); padding-top:12px; width:100%}
  header{flex:none; border:none; padding:2px 2px 0; margin:0; gap:8px}
  .date{display:none}
  .acct .mail{display:none}
  .mode{display:none}
  .acct-btn{max-width:120px}
  .hdr-btn-txt{display:none}
  .hdr-btn{padding:4px 8px}
  h1{font-size:16px}
  .layout{flex:1; min-height:0; display:flex; flex-direction:column; justify-content:space-between; gap:7px; width:100%}
  .gridarea{flex:1; min-height:0}
  .aside{display:none}
  .tools{flex:none}
  .cluebar{flex:none}
  .kbd{display:flex; flex:none; padding-bottom:calc(4px + env(safe-area-inset-bottom))}
  .stamp{display:none}
  .banner{position:fixed; left:8px; right:8px; top:50%; transform:translateY(-50%); z-index:9; max-width:none}
}