:root { --s: 2; --gold: #d8b46a; --gold2: #f3dca0; --panel: rgba(16, 22, 36, 0.92); --panel2: rgba(28, 38, 58, 0.95); --ink: #e9e4d6; --muted: #9aa3b5; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0b0f18; color: var(--ink); user-select: none; -webkit-user-select: none;
  font-family: 'Nunito', 'Segoe UI', sans-serif; font-weight: 700; }
canvas { display: block; }
#game { position: fixed; inset: 0; width: 100vw; height: 100vh; }
#game.blur { filter: blur(4px) brightness(0.8) saturate(1.1); }
#hud { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; }
#overlay { position: fixed; inset: 0; pointer-events: none; }
#vignette { position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity .15s;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(160,0,0,.55) 100%); }
#ui { position: fixed; inset: 0; pointer-events: none; }
#ui > .screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; pointer-events: auto; overflow-y: auto; overflow-x: hidden; }
.dim { background: radial-gradient(ellipse at center, rgba(8, 12, 22, 0.45), rgba(4, 6, 12, 0.78)); }
.dirt { background: radial-gradient(ellipse at 50% 35%, rgba(18, 28, 48, 0.35), rgba(5, 8, 16, 0.86)) !important; }
.redbg { background: radial-gradient(ellipse at center, rgba(90, 10, 10, .18), rgba(30, 0, 0, .55)); }

.mtitle { font-family: 'Cinzel', serif; font-weight: 700; font-size: calc(11px * var(--s)); letter-spacing: .08em; color: var(--gold2);
  text-shadow: 0 2px 6px rgba(0,0,0,.7); margin: calc(20px * var(--s)) 0 calc(12px * var(--s)); text-transform: uppercase; }
.mtitle::after { content: ''; display: block; height: 2px; margin: calc(4px * var(--s)) auto 0; width: 70%;
  background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.big { font-size: calc(18px * var(--s)); }
.mbtn { width: calc(200px * var(--s)); height: calc(20px * var(--s)); margin: calc(2.5px * var(--s)) 0; position: relative;
  background: linear-gradient(180deg, rgba(48, 62, 90, 0.95), rgba(26, 34, 54, 0.95)); border: 1px solid rgba(216, 180, 106, 0.55);
  border-radius: calc(3px * var(--s)); color: var(--ink); font: inherit; font-size: calc(7.5px * var(--s)); letter-spacing: .04em;
  text-shadow: 0 1px 2px rgba(0,0,0,.7); cursor: pointer; padding: 0; text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 2px 6px rgba(0,0,0,.45); transition: all .12s; }
.mbtn:hover { background: linear-gradient(180deg, rgba(86, 106, 146, 0.98), rgba(44, 58, 90, 0.98)); border-color: var(--gold2); color: #fff6dc;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 calc(8px * var(--s)) rgba(243, 220, 160, .35); }
.mbtn:disabled { background: rgba(30, 34, 44, .8); color: #6b7180; border-color: rgba(120,120,130,.3); box-shadow: none; cursor: default; }
.mbtn.half { width: calc(98px * var(--s)); }
.row { display: flex; gap: calc(4px * var(--s)); }
.col { display: flex; flex-direction: column; align-items: center; }
.mlabel { font-size: calc(7px * var(--s)); color: var(--muted); margin-top: calc(6px * var(--s)); align-self: flex-start; }
.minput { width: calc(200px * var(--s)); height: calc(20px * var(--s)); background: rgba(6, 10, 18, .85); border: 1px solid rgba(216,180,106,.45); border-radius: calc(3px * var(--s)); color: var(--ink);
  font: inherit; font-size: calc(7.5px * var(--s)); padding: 0 calc(5px * var(--s)); outline: none; }
.minput:focus { border-color: var(--gold2); box-shadow: 0 0 calc(6px * var(--s)) rgba(243,220,160,.25); }
.slider { width: calc(200px * var(--s)); height: calc(20px * var(--s)); margin: calc(2.5px * var(--s)) 0; position: relative; background: rgba(6, 10, 18, .85);
  border: 1px solid rgba(216,180,106,.4); border-radius: calc(3px * var(--s)); cursor: pointer; font-size: calc(7px * var(--s)); display: flex; align-items: center; justify-content: center;
  color: var(--ink); text-transform: uppercase; letter-spacing: .03em; overflow: hidden; }
.slider .knob { position: absolute; top: 0; bottom: 0; width: calc(8px * var(--s)); background: linear-gradient(180deg, var(--gold2), var(--gold));
  border-radius: calc(2px * var(--s)); box-shadow: 0 0 6px rgba(243,220,160,.5); }
.slider span { position: relative; pointer-events: none; text-shadow: 0 1px 2px #000; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 calc(8px * var(--s)); }
.grid2 .mbtn, .grid2 .slider { width: calc(150px * var(--s)); }

/* title screen */
#title { align-items: flex-start !important; padding-left: 7vw; background: linear-gradient(90deg, rgba(5,8,16,.82) 0%, rgba(5,8,16,.45) 38%, rgba(5,8,16,0) 65%); }
#title .logo { margin-top: 12vh; position: relative; }
#title .logo h1 { margin: 0; font-family: 'Cinzel', serif; font-weight: 900; font-size: calc(36px * var(--s)); letter-spacing: .12em; line-height: 1;
  background: linear-gradient(180deg, #fff3cf 0%, #f0cf7a 45%, #b07a2c 55%, #f5d98a 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #3a2410) drop-shadow(0 6px 12px rgba(0,0,0,.6)); }
#title .logo .edition { font-family: 'Cinzel', serif; margin-top: calc(4px * var(--s)); font-size: calc(7px * var(--s)); color: #e7dcc0; letter-spacing: .5em; text-transform: uppercase; text-shadow: 0 1px 3px #000; }
.splash { margin-top: calc(6px * var(--s)); color: #9fd8ff; font-size: calc(7px * var(--s)); font-style: italic; text-shadow: 0 1px 3px #000; }
#title #tb { align-items: flex-start !important; }
#title .mbtn { text-align: left; padding-left: calc(10px * var(--s)); width: calc(150px * var(--s)); background: linear-gradient(90deg, rgba(30,40,62,.85), rgba(30,40,62,0)); border: none; border-left: 2px solid var(--gold); border-radius: 0; box-shadow: none; font-size: calc(8.5px * var(--s)); }
#title .mbtn:hover { background: linear-gradient(90deg, rgba(216,180,106,.35), rgba(216,180,106,0)); padding-left: calc(14px * var(--s)); box-shadow: none; }
#title .row .mbtn.half { width: calc(73px * var(--s)); }
.corner { position: absolute; bottom: calc(4px * var(--s)); font-size: calc(6px * var(--s)); color: #b7bfcf; text-shadow: 0 1px 2px #000; }

.worldlist { width: calc(270px * var(--s)); height: 45vh; overflow-y: auto; background: var(--panel); border: 1px solid rgba(216,180,106,.4); border-radius: calc(4px * var(--s)); padding: calc(4px * var(--s)); }
.wentry { padding: calc(4px * var(--s)) calc(7px * var(--s)); border: 1px solid transparent; border-radius: calc(3px * var(--s)); cursor: pointer; font-size: calc(7.5px * var(--s)); line-height: 1.45; margin-bottom: 2px; }
.wentry:hover { background: rgba(255,255,255,.04); }
.wentry .sub { color: var(--muted); font-weight: 600; }
.wentry.sel { border-color: var(--gold); background: rgba(216,180,106,.12); }
.progress { width: calc(140px * var(--s)); height: calc(4px * var(--s)); background: rgba(0,0,0,.6); border: 1px solid rgba(216,180,106,.5); border-radius: 99px; margin-top: calc(8px * var(--s)); overflow: hidden; }
.progress > div { height: 100%; background: linear-gradient(90deg, #b07a2c, #f5d98a); width: 0; }

/* inventory windows */
.win { position: relative; background: linear-gradient(180deg, rgba(30, 40, 62, 0.96), rgba(16, 22, 36, 0.97)); border: 1px solid rgba(216, 180, 106, .7); border-radius: calc(5px * var(--s));
  box-shadow: 0 0 0 calc(1px * var(--s)) rgba(0,0,0,.6), 0 calc(8px * var(--s)) calc(30px * var(--s)) rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08); color: var(--ink); margin: auto; }
.win .wl { position: absolute; font-size: calc(7px * var(--s)); color: var(--gold2); white-space: nowrap; text-transform: uppercase; letter-spacing: .06em; font-family: 'Cinzel', serif; }
.slot { position: absolute; width: calc(18px * var(--s)); height: calc(18px * var(--s)); background: radial-gradient(ellipse at 50% 35%, rgba(60, 74, 104, .75), rgba(14, 20, 32, .9));
  border: 1px solid rgba(160, 175, 205, .28); border-radius: calc(2.5px * var(--s)); }
.slot.big { width: calc(26px * var(--s)); height: calc(26px * var(--s)); border-color: rgba(216,180,106,.6); }
.slot img { position: absolute; left: calc(1px * var(--s)); top: calc(1px * var(--s)); width: calc(16px * var(--s)); height: calc(16px * var(--s)); pointer-events: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.slot.big img { left: calc(5px * var(--s)); top: calc(5px * var(--s)); }
.slot .cnt { position: absolute; right: calc(1px * var(--s)); bottom: 0; font-size: calc(6.5px * var(--s)); font-weight: 900; color: #fff; text-shadow: 0 1px 2px #000; pointer-events: none; }
.slot .dur { position: absolute; left: calc(2px * var(--s)); bottom: calc(2px * var(--s)); width: calc(13px * var(--s)); height: calc(2px * var(--s)); background: #000; pointer-events: none; border-radius: 2px; }
.slot .dur > div { height: 100%; border-radius: 2px; }
.slot:hover { border-color: var(--gold2); box-shadow: 0 0 calc(5px * var(--s)) rgba(243,220,160,.35); }
.slot:hover::after { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,.08); pointer-events: none; border-radius: inherit; }
.slot.trash { background: rgba(80,20,20,.6) url() center/contain no-repeat; }
.arrow { position: absolute; width: calc(22px * var(--s)); height: calc(15px * var(--s)); }
.flame { position: absolute; width: calc(14px * var(--s)); height: calc(14px * var(--s)); }
.paperdoll { position: absolute; background: radial-gradient(ellipse at 50% 60%, rgba(70, 90, 130, .55), rgba(8, 12, 22, .9)); border: 1px solid rgba(216,180,106,.45); border-radius: calc(4px * var(--s)); overflow: hidden; }
.paperdoll canvas { width: 100%; height: 100%; }
.csearch { position: absolute; background: rgba(6,10,18,.9); border: 1px solid rgba(216,180,106,.45); border-radius: calc(2px * var(--s)); color: #fff; font: inherit; font-size: calc(7px * var(--s)); padding: 0 calc(3px * var(--s)); outline: none; }
.cscroll { position: absolute; background: rgba(6,10,18,.7); border-radius: calc(2px * var(--s)); }
.cscroll > div { position: absolute; left: calc(1px * var(--s)); right: calc(1px * var(--s)); height: calc(15px * var(--s)); background: linear-gradient(180deg, var(--gold2), var(--gold)); border-radius: calc(2px * var(--s)); }

/* recipe crafting panel */
.recipes { position: absolute; overflow-y: auto; display: flex; flex-direction: column; gap: calc(2px * var(--s)); padding-right: calc(2px * var(--s)); }
.recipes::-webkit-scrollbar { width: calc(3px * var(--s)); }
.recipes::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 4px; }
.rcat { display: flex; gap: calc(2px * var(--s)); position: absolute; }
.rcat::-webkit-scrollbar { height: 2px; } .rcat::-webkit-scrollbar-thumb { background: var(--gold); }
.rcat button { flex: 0 0 auto; font: inherit; font-size: calc(5.5px * var(--s)); text-transform: uppercase; background: rgba(10,14,24,.8); color: var(--muted); border: 1px solid rgba(216,180,106,.3); border-radius: calc(2px * var(--s)); padding: calc(1.5px * var(--s)) calc(4px * var(--s)); cursor: pointer; }
.rcat button.on { color: #1a1206; background: linear-gradient(180deg, var(--gold2), var(--gold)); border-color: var(--gold2); }
.recipe { display: flex; align-items: center; gap: calc(4px * var(--s)); padding: calc(2px * var(--s)) calc(3px * var(--s)); border: 1px solid rgba(160,175,205,.18); border-radius: calc(3px * var(--s)); background: rgba(8,12,22,.55); cursor: pointer; min-height: calc(20px * var(--s)); }
.recipe:hover { border-color: var(--gold2); background: rgba(216,180,106,.1); }
.recipe.sel { border-color: var(--gold); background: rgba(216,180,106,.16); }
.recipe.no { opacity: .45; }
.recipe img { width: calc(16px * var(--s)); height: calc(16px * var(--s)); }
.recipe .rn { font-size: calc(6.5px * var(--s)); flex: 1; }
.recipe .rq { font-size: calc(6px * var(--s)); color: var(--muted); }
.rdetail { position: absolute; display: flex; flex-direction: column; gap: calc(2px * var(--s)); font-size: calc(6px * var(--s)); }
.rdetail .ing { display: flex; align-items: center; gap: calc(3px * var(--s)); }
.rdetail .ing img { width: calc(12px * var(--s)); height: calc(12px * var(--s)); }
.rdetail .ok { color: #9fe08a; } .rdetail .bad { color: #ff8f80; }

#tooltip { position: fixed; display: none; pointer-events: none; z-index: 20; background: linear-gradient(180deg, rgba(30,40,62,.97), rgba(14,20,32,.97)); border: 1px solid var(--gold);
  border-radius: calc(3px * var(--s)); padding: calc(3px * var(--s)) calc(6px * var(--s)); font-size: calc(7px * var(--s)); color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.6); }
#tooltip .g { color: var(--muted); font-weight: 600; }
#cursorStack { position: fixed; pointer-events: none; z-index: 19; width: calc(16px * var(--s)); height: calc(16px * var(--s)); display: none; }
#cursorStack img { width: 100%; height: 100%; }
#cursorStack .cnt { position: absolute; right: calc(-2px * var(--s)); bottom: calc(-3px * var(--s)); font-size: calc(6.5px * var(--s)); font-weight: 900; text-shadow: 0 1px 2px #000; }
#chatInput { position: fixed; left: calc(4px * var(--s)); width: calc(240px * var(--s)); bottom: calc(4px * var(--s)); height: calc(13px * var(--s));
  background: rgba(10,14,24,.75); border: 1px solid rgba(216,180,106,.45); border-radius: calc(3px * var(--s)); color: #fff; font: inherit; font-size: calc(7px * var(--s)); padding: 0 calc(4px * var(--s)); outline: none; display: none; }
#clickToPlay { position: fixed; left: 50%; top: 58%; transform: translateX(-50%); display: none; align-items: center; justify-content: center;
  padding: calc(4px * var(--s)) calc(10px * var(--s)); background: rgba(10,14,24,.7); border: 1px solid rgba(216,180,106,.5); border-radius: calc(3px * var(--s)); color: var(--gold2); font-size: calc(7.5px * var(--s));
  pointer-events: none; z-index: 5; max-width: 80vw; text-align: center; text-transform: uppercase; letter-spacing: .06em; }
#clickToPlay.warn { color: #ffcf6a; }

/* écran de connexion compact : tout tient à l'écran (et défile si la fenêtre est très petite) */
.authscreen { padding-bottom: 4vh; }
.authscreen .logo { margin-top: 3vh !important; }
.authscreen .logo h1 { font-size: calc(22px * var(--s)) !important; }
.authscreen .logo .edition { font-size: calc(5.5px * var(--s)) !important; }
.authscreen #ab { margin-top: calc(6px * var(--s)) !important; }
.authscreen .mlabel { margin-top: calc(3.5px * var(--s)); }
.authscreen .minput { height: calc(15px * var(--s)); }
.authscreen .mbtn { height: calc(16px * var(--s)); margin: calc(2px * var(--s)) 0; }