/* Layout : plein écran — carte isométrique à gauche, chancellerie à droite ; la chancellerie passe sous la carte sur téléphone */
:root{
  --lapis:#0f1829; --lapis-2:#152139; --lapis-3:#1d2c4b; --rule:#30436a;
  --gilt:#d8ad52; --gilt-dim:#8e7438; --vellum:#ece4cf; --muted:#9ca8c3;
  --blood:#d65a43; --verdant:#7ab86b;
  --f-display:'IM Fell English SC','Palatino Linotype',Georgia,serif;
  --f-body:'Alegreya Sans','Segoe UI',system-ui,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
[hidden]{display:none!important}
body{background:var(--lapis);color:var(--vellum);font-family:var(--f-body);font-size:15px;line-height:1.4;overflow:hidden}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,[tabindex]:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--gilt);outline-offset:2px}
#app{height:100%;display:grid;grid-template-rows:auto 1fr;min-height:0}
header{display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px;padding:8px 16px;background:var(--lapis-2);border-bottom:1px solid var(--rule)}
.brand{font-family:var(--f-display);font-size:22px;color:var(--gilt);letter-spacing:.02em;white-space:nowrap}
.stat{display:flex;flex-direction:column;min-width:0}
.lbl{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}
.stat b{font-family:var(--f-mono);font-weight:600;font-size:14px;white-space:nowrap}
.research{cursor:pointer;min-width:150px}
.bar{display:block;height:5px;background:var(--lapis);border:1px solid var(--rule);margin-top:3px}
.bar i{display:block;height:100%;background:var(--gilt);width:0}
.tax input{width:120px;accent-color:var(--gilt)}
.tax output{font-family:var(--f-mono);color:var(--vellum)}
.hbtns{margin-left:auto;display:flex;gap:6px}
.btn{background:var(--lapis-3);border:1px solid var(--rule);padding:5px 12px;border-radius:3px;font-size:14px}
.btn:hover{border-color:var(--gilt-dim)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.primary{background:var(--gilt);color:#1a1408;border-color:var(--gilt);font-weight:700}
.btn.primary:hover{background:#e6bd63}
main{display:grid;grid-template-columns:minmax(0,1fr) 320px;min-height:0}
#mapwrap{position:relative;min-width:0;min-height:0;overflow:hidden;touch-action:none;background:#070c16}
#map{display:block;width:100%;height:100%;cursor:pointer}
#tileInfo{position:absolute;left:12px;bottom:12px;background:rgba(15,24,41,.88);border:1px solid var(--rule);padding:6px 10px;font-size:13px;max-width:calc(100% - 24px);pointer-events:none}
#tileInfo:empty{display:none}
#gotoHint{position:absolute;top:12px;left:50%;transform:translateX(-50%);background:var(--gilt);color:#1a1408;padding:4px 12px;font-weight:700;font-size:13px}
aside{border-left:1px solid var(--rule);background:var(--lapis-2);overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding-block:14px;padding-inline:16px;min-height:0}
aside h3{font-family:var(--f-display);font-weight:400;font-size:17px;color:var(--gilt);margin:0 0 6px;letter-spacing:.02em}
.ucard{display:grid;grid-template-columns:44px 1fr;gap:4px 12px;align-items:start}
.ucard canvas{width:44px;height:52px}
.uname{font-size:17px;font-weight:700;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.vet{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gilt);border:1px solid var(--gilt-dim);padding:0 5px}
.ustats{font-family:var(--f-mono);font-size:13px;color:var(--muted)}
.ustats span{color:var(--vellum)}
.hp{grid-column:1/-1;height:6px;background:var(--lapis);border:1px solid var(--rule)}
.hp i{display:block;height:100%}
.uinfo{grid-column:1/-1;font-size:13px;color:var(--muted)}
.empty{color:var(--muted);font-size:14px}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.actions .btn{display:flex;justify-content:space-between;align-items:center;gap:6px;text-align:left;font-size:13px;padding:6px 8px}
kbd{font-family:var(--f-mono);font-size:11px;color:var(--muted);border:1px solid var(--rule);padding:0 4px;border-radius:2px;background:var(--lapis)}
.btn.primary kbd{color:#3d2f10;border-color:#a8853d;background:transparent}
.end{width:100%;padding:10px;font-size:16px;display:flex;justify-content:center;gap:10px;align-items:center}
.end.ready{animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 4px rgba(216,173,82,.28)}}
#mini{width:100%;max-width:288px;aspect-ratio:2/1;display:block;background:#070c16;border:1px solid var(--rule);cursor:crosshair}
.journal ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;font-size:13px}
.journal li{border-left:2px solid var(--rule);padding-left:8px}
.journal li.good{border-color:var(--verdant)}
.journal li.bad{border-color:var(--blood)}
.journal li.big{border-color:var(--gilt)}
.journal time{font-family:var(--f-mono);font-size:11px;color:var(--muted);display:block}
#modal{position:fixed;inset:0;background:rgba(5,9,18,.72);display:flex;align-items:center;justify-content:center;z-index:10;padding:16px}
.sheet{background:var(--lapis-2);border:1px solid var(--gilt-dim);box-shadow:0 20px 60px rgba(0,0,0,.5);width:100%;max-width:680px;max-height:100%;overflow-y:auto;padding:22px 24px;position:relative}
.sheet h2{font-family:var(--f-display);font-weight:400;font-size:30px;color:var(--gilt);margin:0 0 4px;text-wrap:balance;line-height:1.1}
.sheet h4{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:18px 0 8px;font-weight:500}
.sheet p{margin:6px 0;max-width:62ch}
.sub{color:var(--muted)}
.x{position:absolute;top:10px;right:12px;background:none;border:0;font-size:22px;color:var(--muted)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px}
.fig{background:var(--lapis);border:1px solid var(--rule);padding:8px 10px;min-width:0}
.fig .lbl{display:block}
.fig b{font-family:var(--f-mono);font-size:16px;font-weight:600}
.fig .bar{margin-top:6px}
.opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px}
.opt{display:flex;flex-direction:column;align-items:flex-start;text-align:left;background:var(--lapis);border:1px solid var(--rule);padding:7px 10px;border-radius:2px;min-width:0}
.opt:hover{border-color:var(--gilt-dim)}
.opt.cur{border-color:var(--gilt);background:var(--lapis-3)}
.opt b{font-weight:700}
.opt small{font-family:var(--f-mono);font-size:11px;color:var(--muted)}
.opt em{font-style:normal;font-size:12px;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--rule);padding:2px 8px;font-size:13px;background:var(--lapis)}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.civpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:6px}
.civpick label{display:flex;gap:8px;align-items:center;border:1px solid var(--rule);padding:7px 9px;background:var(--lapis);cursor:pointer}
.civpick input{accent-color:var(--gilt)}
.civpick label:has(input:checked){border-color:var(--gilt);background:var(--lapis-3)}
.sw{width:14px;height:16px;border-radius:0 0 7px 7px;border:1px solid rgba(0,0,0,.5);flex:none}
select{background:var(--lapis);color:var(--vellum);border:1px solid var(--rule);padding:5px 8px;font:inherit}
table{border-collapse:collapse;width:100%;font-size:14px}
td,th{padding:5px 8px;border-bottom:1px solid var(--rule);text-align:left}
th{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:500}
td.n{font-family:var(--f-mono);text-align:right}
.tw{overflow-x:auto}
.war{color:var(--blood);font-weight:700}
.peace{color:var(--verdant)}
.help dt{font-weight:700;margin-top:6px}
.help dd{margin:0 0 0 0;color:var(--muted)}
@media (max-width:760px){
  main{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}
  aside{border-left:0;border-top:1px solid var(--rule);max-height:42%}
  .mm,.journal{display:none}
  #bEnd{order:-1}
  aside{gap:10px;padding-block:10px}
  .stat .lbl{font-size:10px}
  .brand{font-size:18px}
  header{gap:4px 14px}
  .tax input{width:90px}
  .sheet{padding:18px 16px}
  .sheet h2{font-size:24px}
}
@media (prefers-reduced-motion:reduce){.end.ready{animation:none}}

/* Ajouts de la version en ligne */
#app{padding-top:env(safe-area-inset-top,0px)}
.home{color:var(--muted);text-decoration:none;font-size:26px;line-height:1;margin-right:-8px}
.home:hover{color:var(--gilt)}
#toast{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);background:var(--lapis-2);border:1px solid var(--gilt-dim);padding:8px 14px;font-size:14px;z-index:5;max-width:calc(100% - 32px)}
.chartbox{background:var(--lapis);border:1px solid var(--rule);padding:8px}
.chartbox canvas{display:block;width:100%;height:auto}
.tabs{display:flex;gap:4px;flex-wrap:wrap;margin:8px 0}
.tab{background:none;border:0;border-bottom:2px solid transparent;padding:6px 8px;color:var(--muted)}
.tab[aria-selected="true"]{color:var(--vellum);border-color:var(--gilt)}
tr.me td{color:var(--gilt)}
.err{color:#ff9b8a}
td.acts{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.sheet input:not([type]),.sheet input[type=text]{background:var(--lapis);color:var(--vellum);border:1px solid var(--rule);padding:5px 8px;font:inherit}