/* Osatopia Horde — interface in the manner of Dofus Retro: parchment panels, carved wood bars, bronze frames. */
@font-face { font-family: Cinzel; src: url(../fonts/cinzel-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: Cinzel; src: url(../fonts/cinzel-900.woff2) format('woff2'); font-weight: 900; font-display: swap; }
@font-face { font-family: Cinzel; src: url(../fonts/cinzel-600.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: Alegreya; src: url(../fonts/alegreya-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Alegreya; src: url(../fonts/alegreya-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: Alegreya; src: url(../fonts/alegreya-800.woff2) format('woff2'); font-weight: 800; font-display: swap; }
:root {
  --parch: #efe6cb; --parch2: #e4d8b6; --parch3: #d3c49c; --parch-line: #b9a77c; --ink: #3a3024; --ink2: #6b5c45; --wood: #4f4434; --wood2: #3a3127; --wood3: #2b241c;
  --orange: #f39237; --orange2: #d9631b; --gold: #f0c35a; --gold2: #ffe39a; --bronze: #b27a2c; --green: #3f8f3a; --green2: #6cc15a; --red: #c8331f; --blue: #2f79c8;
  --shadow: 0 12px 34px rgba(0,0,0,.55); --title: Cinzel, Georgia, serif; --body: Alegreya, 'Trebuchet MS', sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #0d0b08; color: var(--ink); font-family: var(--body); font-size: 15px; overflow: hidden; user-select: none; }
#view { position: fixed; inset: 0; }
#view canvas { display: block; }
#ui { position: fixed; inset: 0; pointer-events: none; }
#ui > * { pointer-events: auto; }
.hidden { display: none !important; }
b, strong { font-weight: 800; }
h1, h2, h3, h4 { font-family: var(--title); font-weight: 700; margin: 0; letter-spacing: .5px; }
input, select { font: inherit; color: var(--ink); background: #fbf6e6; border: 1px solid var(--parch-line); border-radius: 6px; padding: 8px 10px; outline: none; box-shadow: inset 0 1px 3px rgba(0,0,0,.12); }
input:focus, select:focus { border-color: var(--orange); }
.muted { color: var(--ink2); }
.small { font-size: 13px; }

/* ---------------------------------------------------------------- buttons */
.btn { position: relative; font-family: var(--title); font-weight: 700; font-size: 14px; letter-spacing: .4px; color: #fff4dc; background: linear-gradient(180deg, #6a5b45, #4a3f30); border: 1px solid #2b241c; border-radius: 999px; padding: 9px 18px; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,235,190,.35), inset 0 -2px 0 rgba(0,0,0,.25), 0 2px 0 #1d1812, 0 3px 8px rgba(0,0,0,.35); text-shadow: 0 1px 0 rgba(0,0,0,.5); transition: transform .06s, filter .15s; white-space: nowrap; }
.btn::before { content: ''; position: absolute; inset: 2px; border-radius: inherit; border: 1px solid rgba(255,220,150,.35); pointer-events: none; }
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: default; filter: grayscale(.6); }
.btn.orange { color: #fff; background: linear-gradient(180deg, #ffb35c 0%, var(--orange) 35%, var(--orange2) 100%); border-color: #7a3207; text-shadow: 0 1px 1px rgba(110,40,0,.8); }
.btn.orange::before { border-color: rgba(255,240,200,.55); }
.btn.light { color: var(--ink); background: linear-gradient(180deg, #fbf3dc, #e2d3ab); border-color: #8d7a54; text-shadow: none; }
.btn.light::before { border-color: rgba(255,255,255,.7); }
.btn.big { font-size: 20px; padding: 14px 40px; }
.btn.huge { font-size: 28px; padding: 16px 64px; }
.btn.small { font-size: 12px; padding: 5px 12px; }
.btn.round { width: 40px; height: 40px; padding: 0; display: inline-grid; place-items: center; font-size: 17px; }
.kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; margin-right: 6px; border-radius: 5px; background: #fbf3dc; color: var(--ink); border: 1px solid #8d7a54; box-shadow: 0 2px 0 #8d7a54; font: 800 11px var(--body); text-shadow: none; }

/* ---------------------------------------------------------------- windows (parchment) */
.win { background: var(--parch); border-radius: 14px; box-shadow: var(--shadow), 0 0 0 1px #2b241c, inset 0 0 0 3px #c8b88e; overflow: hidden; display: flex; flex-direction: column; }
.win-h { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: linear-gradient(180deg, #5d5140, #463c2f); color: #fff1d2; border-bottom: 2px solid #2b241c; box-shadow: inset 0 1px 0 rgba(255,230,180,.25); }
.win-h h2 { font-size: 20px; color: #fff4dc; text-shadow: 0 2px 0 rgba(0,0,0,.4); }
.win-h small { display: block; font: 700 12px var(--body); color: var(--gold); letter-spacing: .3px; }
.win-h .grow { flex: 1; }
.win-b { padding: 14px 16px; overflow: auto; flex: 1; }
.win-f { padding: 10px 16px; border-top: 1px solid var(--parch-line); background: var(--parch2); display: flex; gap: 10px; align-items: center; }
.box { background: #f7f0da; border: 1px solid var(--parch-line); border-radius: 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font: 800 11px var(--body); letter-spacing: .5px; text-transform: uppercase; background: rgba(58,48,36,.1); color: var(--ink2); }
.pill.auto { background: #d8ecd2; color: #2c6b27; }
.pill.up { background: #f8ddc7; color: #a24b12; }
.pill.awk { background: #fff0c2; color: #8b5d00; }
.pill.curse { background: #ecd0d6; color: #7a1d33; }
.pill.stat { background: #dfe7f3; color: #2d4f7c; }
.close { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, #6a5b45, #4a3f30); color: #fff1d2; border: 2px solid #c79a4c; cursor: pointer; font-weight: 800; }

/* ---------------------------------------------------------------- spell icons */
.ico { position: relative; flex: 0 0 auto; border-radius: 10px; background-image: url(../assets/ui/spells.webp); background-repeat: no-repeat; filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); }
.ico.sico { background-image: url(../assets/ui/stats.webp); }
.ico.noimg { display: grid; place-items: center; background: linear-gradient(180deg, #6a5b45, #3a3127); border: 3px solid #c79a4c; color: #fff1d2; font: 900 22px var(--title); }
.ico.lock { filter: grayscale(1) brightness(.75); }
.ico .lv { position: absolute; right: -4px; bottom: -4px; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 10px; background: #3a3127; color: var(--gold2); font: 800 11px/20px var(--body); text-align: center; border: 1px solid #c79a4c; }

/* ---------------------------------------------------------------- loading */
.loading { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 40%, #1c1912, #070605 70%); transition: opacity .5s; }
.loading.done { opacity: 0; pointer-events: none; }
.loading .in { width: min(440px, 86vw); text-align: center; }
.loading small { font: 800 11px var(--body); letter-spacing: 3px; color: var(--orange); }
.logo-word { font-family: var(--title); font-weight: 900; color: #f4e4bd; text-shadow: 0 3px 0 #6b4a1d, 0 6px 18px rgba(0,0,0,.8); line-height: .95; }
.bar { position: relative; height: 18px; border-radius: 9px; background: #d9cca8; border: 2px solid #4b3f30; box-shadow: inset 0 2px 3px rgba(0,0,0,.25); overflow: hidden; }
.bar > i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(180deg, #ffb35c, var(--orange2)); transition: width .2s; }
.bar > span { position: absolute; inset: 0; font: 800 11px/14px var(--body); color: var(--ink); text-align: center; }

/* ---------------------------------------------------------------- top bar */
.topbar { position: fixed; top: 10px; left: 12px; right: 12px; display: flex; align-items: center; gap: 8px; z-index: 5; pointer-events: none; }
.topbar > * { pointer-events: auto; }
.topbar .grow { flex: 1; pointer-events: none; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px 0 4px; border-radius: 999px; background: linear-gradient(180deg, rgba(74,63,48,.95), rgba(43,36,28,.95)); border: 1px solid #c79a4c; color: #fff1d2; font: 800 13px var(--body); box-shadow: 0 3px 10px rgba(0,0,0,.4); cursor: pointer; }
.chip.np { padding: 0 12px; }
.chip .face { width: 30px; height: 30px; border-radius: 50%; background: #e9dcb7 center/cover no-repeat; border: 2px solid #c79a4c; }
.chip .dot { width: 9px; height: 9px; border-radius: 50%; background: #5fd35a; box-shadow: 0 0 8px #5fd35a; }
.chip small { font-weight: 700; color: var(--gold); }
.kama { display: inline-block; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3b3, #e6b432 45%, #8f6312); box-shadow: 0 0 6px rgba(255,210,90,.6), inset 0 -1px 2px rgba(0,0,0,.3); }

/* ---------------------------------------------------------------- home */
.screen { position: fixed; inset: 0; }
.vignette { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 40%, rgba(5,4,3,.72) 100%); }
.home-logo { position: absolute; left: 50%; top: 13%; transform: translateX(-50%); text-align: center; pointer-events: none; }
.home-logo .a { font-size: 30px; letter-spacing: 8px; color: #fff1d2; }
.home-logo .b { font-size: 108px; letter-spacing: 4px; color: #ffd57a; text-shadow: 0 4px 0 #7a4410, 0 8px 0 #3b2208, 0 12px 26px rgba(0,0,0,.85); }
.home-logo .seal { width: 84px; height: 84px; margin: 0 auto -6px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #c9e9ff, #2f79c8 55%, #183e70); border: 4px solid #d6a84c; box-shadow: 0 0 30px rgba(110,190,255,.55), inset 0 0 18px rgba(255,255,255,.4); animation: spin 18s linear infinite; position: relative; }
.home-logo .seal::after { content: ''; position: absolute; inset: 10px; border-radius: 50%; background: conic-gradient(from 0deg, transparent, rgba(255,255,255,.65), transparent 30%, rgba(255,255,255,.45), transparent 60%, rgba(255,255,255,.55), transparent 90%); filter: blur(1px); }
@keyframes spin { to { transform: rotate(360deg); } }
.tagline { margin: 14px auto 0; max-width: 560px; padding: 8px 16px; border-radius: 8px; background: rgba(30,25,18,.65); color: #fff1d2; font-size: 16px; text-shadow: 0 1px 2px #000; }
.home-nav { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); display: flex; gap: 12px; align-items: center; }
.home-nav .btn { display: inline-flex; align-items: center; gap: 8px; }
.home-nav .btn i { font-style: normal; font-size: 18px; }
.side-col { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 8px; padding: 8px 6px; border-radius: 14px; background: rgba(43,36,28,.85); border: 1px solid #c79a4c; }
.side-col button { width: 46px; height: 46px; border-radius: 50%; border: 2px solid #c79a4c; background: radial-gradient(circle at 40% 35%, #8a7552, #4a3f30); color: #ffe9b8; font-size: 20px; cursor: pointer; position: relative; }
.side-col button:hover { filter: brightness(1.2); }
.side-col button span { position: absolute; left: 54px; top: 50%; transform: translateY(-50%); white-space: nowrap; font: 800 12px var(--body); color: #fff1d2; background: rgba(43,36,28,.95); padding: 4px 8px; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity .15s; }
.side-col button:hover span { opacity: 1; }
.rooms-win { position: absolute; right: 14px; top: 64px; width: 320px; max-height: 50vh; }
.rooms-win .win-h { padding: 8px 12px; }
.rooms-win .win-h h2 { font-size: 15px; }
.rooms { display: flex; flex-direction: column; gap: 6px; }
.room-item { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 8px; background: #f7f0da; border: 1px solid var(--parch-line); cursor: pointer; }
.room-item:hover { border-color: var(--orange); }
.room-item .grow { flex: 1; min-width: 0; }
.room-item b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-item small { color: var(--ink2); }
.foot { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; font-size: 11px; color: rgba(255,240,210,.55); pointer-events: none; }

/* ---------------------------------------------------------------- play flow */
.flow-top { position: absolute; top: 12px; left: 0; right: 0; display: flex; justify-content: center; pointer-events: none; }
.stepper { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 999px; background: rgba(43,36,28,.88); border: 1px solid #6e5c40; pointer-events: auto; }
.stepper .st { display: flex; align-items: center; gap: 6px; padding: 5px 12px 5px 6px; border-radius: 999px; font: 800 12px var(--body); color: #b9a77c; letter-spacing: .5px; text-transform: uppercase; }
.stepper .st i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; background: #5d5140; color: #fff1d2; border: 1px solid #8d7a54; }
.stepper .st.done { color: var(--gold); cursor: pointer; } .stepper .st.done i { background: var(--gold); color: var(--ink); }
.stepper .st.cur { color: #fff; background: linear-gradient(180deg, #ffb35c, var(--orange2)); } .stepper .st.cur i { background: #fff; color: var(--orange2); }
.stepper .sep { width: 14px; height: 1px; background: #6e5c40; }
.flow-top .back { pointer-events: auto; margin-right: 10px; }
.step { position: absolute; inset: 64px 0 0 0; }
.modes { position: absolute; inset: 70px 3vw 70px; display: flex; gap: 2vw; justify-content: center; align-items: stretch; }
.mode-card { position: relative; flex: 0 1 300px; border-radius: 14px; overflow: hidden; cursor: pointer; background: #2b241c; border: 2px solid #8d6a2e; box-shadow: var(--shadow); display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s; }
.mode-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0,0,0,.6), 0 0 0 2px var(--gold); }
.mode-card .art { flex: 1; min-height: 200px; background: radial-gradient(ellipse at 50% 70%, rgba(255,210,120,.35), transparent 70%), linear-gradient(180deg, #5b6f4a, #2c3424) ; display: grid; place-items: end center; overflow: hidden; }
.mode-card .art img { width: 92%; max-height: 100%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 8px 14px rgba(0,0,0,.6)); }
.mode-card .txt { padding: 14px; background: linear-gradient(180deg, #4a3f30, #2b241c); color: #fff1d2; text-align: center; border-top: 2px solid #8d6a2e; }
.mode-card h3 { font-size: 24px; color: #ffe9b8; }
.mode-card p { margin: 6px 0 10px; font-size: 14px; color: #e8dcc0; min-height: 38px; }
.mode-card .tag { display: inline-block; padding: 5px 14px; border-radius: 999px; background: rgba(0,0,0,.35); border: 1px solid #8d6a2e; font: 800 12px var(--body); color: var(--gold); }
.mode-card.dis { filter: grayscale(.9) brightness(.7); cursor: default; }
.mode-card.dis:hover { transform: none; }
/* class choice */
.cls-strip { position: absolute; left: 3vw; right: 3vw; top: 20px; display: flex; gap: 8px; justify-content: center; }
.cls-card { position: relative; width: 7.2vw; max-width: 104px; min-width: 64px; aspect-ratio: 9 / 15; border-radius: 10px; overflow: hidden; cursor: pointer; background: linear-gradient(180deg, #6b5a40, #2f271d); border: 2px solid #6e5c40; box-shadow: 0 6px 14px rgba(0,0,0,.45); transition: transform .12s; }
.cls-card img { position: absolute; left: 50%; top: 2%; height: 100%; transform: translateX(-50%); }
.cls-card span { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 0 5px; text-align: center; font: 700 11px var(--title); color: #fff1d2; background: linear-gradient(180deg, transparent, rgba(0,0,0,.85) 40%); }
.cls-card:hover { transform: translateY(-3px); }
.cls-card.sel { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 0 22px rgba(255,200,90,.55); transform: translateY(-6px) scale(1.06); z-index: 1; }
.cls-card .lv { position: absolute; top: 4px; right: 4px; padding: 1px 6px; border-radius: 999px; font: 800 10px var(--body); background: rgba(0,0,0,.6); color: var(--gold2); }
.cls-detail { position: absolute; left: 3vw; right: 3vw; bottom: 22px; top: calc(20px + min(173px, 12vw) + 26px); display: grid; grid-template-columns: 250px 1.4fr 1fr; gap: 18px; padding: 16px; }
.cls-detail .stage { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.cls-detail .stage canvas { position: relative; width: 230px; height: 230px; }
.cls-detail .stage .pedname { margin-top: 6px; font: 700 15px var(--title); color: var(--ink2); }
.cls-detail .stage .art { position: absolute; left: -16px; right: -16px; top: -16px; bottom: 90px; background: center top / cover no-repeat; opacity: .9; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
.cls-detail .stage .ped { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); width: 160px; height: 46px; border-radius: 50%; background: radial-gradient(ellipse at 50% 38%, #fff6d6 0%, #e7c98a 40%, #a07a36 68%, #5d4214 71%, transparent 73%); filter: drop-shadow(0 8px 10px rgba(0,0,0,.3)); }
.cls-detail h3 { font-size: 30px; color: var(--ink); display: flex; align-items: center; gap: 10px; }
.cls-detail h3 img { width: 34px; height: 34px; }
.cls-detail .desc { margin: 6px 0 10px; color: var(--ink2); }
.xpline { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; font: 800 13px var(--body); }
.xpline .bar { flex: 1; height: 12px; }
.xpline .bar > i { background: linear-gradient(180deg, #8fd2ff, #2f79c8); }
.spellgrid { display: flex; flex-wrap: wrap; gap: 7px; }
.spellgrid .ico { cursor: help; }
.records { font-size: 13px; }
.records h4 { font-size: 14px; color: var(--ink2); margin-bottom: 6px; }
.records div { display: flex; justify-content: space-between; padding: 4px 8px; border-bottom: 1px solid rgba(58,48,36,.1); }
.records div:nth-child(odd) { background: rgba(58,48,36,.04); }
.cls-actions { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
/* zone choice */
.zone-hero { position: absolute; inset: 0; background: #000 center/cover no-repeat; transition: background-image .3s; }
.zone-hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 42%, rgba(0,0,0,.05), rgba(0,0,0,.65) 85%); }
.zone-title { position: absolute; left: 50%; top: 13%; transform: translateX(-50%); text-align: center; z-index: 1; }
.zone-title small { display: block; font: 800 12px var(--body); letter-spacing: 3px; color: var(--gold); text-shadow: 0 1px 2px #000; }
.zone-title h2 { font-size: 64px; color: #fff4dc; text-shadow: 0 4px 0 #3b2208, 0 8px 20px rgba(0,0,0,.8); line-height: 1.05; }
.zone-title .best { margin-top: 10px; display: inline-flex; gap: 16px; padding: 6px 16px; border-radius: 999px; background: rgba(30,25,18,.7); color: #fff1d2; font-size: 14px; }
.zone-title .best b { color: var(--gold2); }
.zone-arrow { position: absolute; top: 46%; z-index: 1; width: 64px; height: 64px; border-radius: 50%; border: 3px solid #d6a84c; background: radial-gradient(circle at 40% 35%, #6a5b45, #2b241c); color: #fff1d2; font-size: 30px; cursor: pointer; box-shadow: 0 6px 16px rgba(0,0,0,.5); }
.zone-arrow.l { left: 7%; } .zone-arrow.r { right: 330px; }
.zone-arrow small { position: absolute; top: 72px; left: 50%; transform: translateX(-50%); white-space: nowrap; font: 700 13px var(--title); color: #fff1d2; text-shadow: 0 1px 3px #000; }
.zone-mid { position: absolute; left: 50%; top: 58%; transform: translateX(-50%); z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.zone-mid .mobs { display: flex; gap: 4px; padding: 6px 10px; border-radius: 12px; background: rgba(30,25,18,.65); }
.zone-mid .mobs img { height: 46px; filter: drop-shadow(0 2px 2px #000); }
.zone-lock { padding: 8px 14px; border-radius: 8px; background: rgba(107,22,16,.85); color: #fff; }
.zone-bottom { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 1; display: flex; justify-content: space-between; align-items: flex-end; }
.hero-chip { display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 12px; background: rgba(43,36,28,.9); border: 1px solid #8d6a2e; color: #fff1d2; cursor: pointer; }
.hero-chip img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; object-position: top; background: #e9dcb7; border: 2px solid #c79a4c; }
.hero-chip small { display: block; color: var(--gold); }
/* team */
.team-win { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(760px, 94vw); }
.seg { display: flex; gap: 8px; margin-bottom: 12px; }
.seg button { flex: 1; padding: 13px; border-radius: 10px; border: 1px solid #8d7a54; background: #f7f0da; font: 700 15px var(--title); color: var(--ink); cursor: pointer; }
.seg button.on { color: #fff; background: linear-gradient(180deg, #ffb35c, var(--orange2)); border-color: #7a3207; }
.member { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: #f7f0da; border: 1px solid var(--parch-line); margin-bottom: 6px; }
.member img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; object-position: top; background: #e9dcb7; border: 2px solid #c79a4c; }
.member .grow { flex: 1; }
.member .ok { color: var(--green); font-weight: 800; }
.member .ttl { color: #8a4bb8; font-size: 12px; }
.codebox { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: #2b241c; color: #fff1d2; margin-bottom: 10px; }
.codebox b { font: 900 26px var(--title); letter-spacing: 6px; color: var(--gold2); }
.chat-log { height: 90px; overflow: auto; padding: 6px 8px; border-radius: 8px; background: #f7f0da; border: 1px solid var(--parch-line); font-size: 13px; margin: 8px 0 6px; }
.start-bar { position: absolute; right: 18px; bottom: 18px; }

/* ---------------------------------------------------------------- HUD */
#hud { position: fixed; inset: 0; pointer-events: none; }
#hud .pe { pointer-events: auto; }
.lowhp { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(170,10,0,.55) 100%); transition: opacity .25s; }
.waveplate { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); min-width: 132px; padding: 4px 16px 7px; text-align: center; border-radius: 10px; background: linear-gradient(180deg, #4e4333, #2f281f); border: 2px solid #9b7a3d; box-shadow: 0 6px 16px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,230,180,.25); color: #fff1d2; }
.waveplate small { font: 800 10px var(--body); letter-spacing: 3px; color: var(--gold); }
.waveplate b { display: block; font: 900 32px/1 var(--title); color: #fff4dc; text-shadow: 0 2px 0 #000; }
.waveplate .wbar { display: block; height: 5px; margin-top: 4px; border-radius: 3px; background: rgba(0,0,0,.5); overflow: hidden; }
.waveplate .wbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--orange), var(--gold)); }
.waveplate .sub { font-size: 11px; color: #d8c9a2; margin-top: 3px; }
.hud-tl { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.hud-tr { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; }
.mates { display: flex; flex-direction: column; gap: 5px; }
.mate { display: flex; align-items: center; gap: 6px; padding: 3px 8px 3px 3px; border-radius: 999px; background: rgba(43,36,28,.85); color: #fff1d2; font: 700 12px var(--body); }
.mate img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; object-position: top; background: #e9dcb7; }
.mate .mb { width: 80px; height: 6px; border-radius: 3px; background: rgba(0,0,0,.5); overflow: hidden; }
.mate .mb i { display: block; height: 100%; background: #e2482f; }
.mate.down { opacity: .6; }
.mate.daily { padding: 4px 10px; color: var(--gold2); border: 1px solid #c99a2e; }
.statpanel { position: absolute; left: 0; top: 120px; display: flex; align-items: flex-start; pointer-events: auto; transition: transform .2s; }
.statpanel.closed { transform: translateX(-232px); }
.statpanel .win { width: 232px; border-radius: 0 12px 12px 0; }
.statpanel .win-h { padding: 7px 10px; } .statpanel .win-h h2 { font-size: 13px; }
.statpanel .rows { padding: 6px 8px; font-size: 12px; }
.statpanel .rows div { display: flex; align-items: center; justify-content: space-between; padding: 3px 4px; border-bottom: 1px solid rgba(58,48,36,.08); }
.statpanel .rows b { color: var(--ink); }
.statpanel .tab { margin-top: 70px; width: 20px; height: 60px; border-radius: 0 8px 8px 0; background: #4a3f30; border: 1px solid #c79a4c; border-left: 0; color: #fff1d2; display: grid; place-items: center; cursor: pointer; font-size: 12px; }
.bossbar { position: absolute; top: 88px; left: 50%; transform: translateX(-50%); width: min(560px, 72vw); display: flex; align-items: center; gap: 10px; }
.bossbar img { width: 58px; height: 58px; object-fit: contain; filter: drop-shadow(0 2px 4px #000); }
.bossbar .bb { flex: 1; }
.bossbar .bb b { font: 700 15px var(--title); color: #ffdf9a; text-shadow: 0 2px 2px #000; }
.bossbar .bar { height: 16px; border-color: #3a0f08; background: #2b1410; }
.bossbar .bar > i { background: linear-gradient(180deg, #ff6a45, #a8160b); transition: width .25s; }
/* bottom banner */
.banner { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); display: flex; align-items: flex-end; gap: 0; pointer-events: auto; }
.bn-left, .bn-right { height: 72px; padding: 8px 12px; background: linear-gradient(180deg, #efe6cb, #ddd0aa); border: 2px solid #5d5140; box-shadow: 0 6px 18px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.55); }
.bn-left { width: 250px; border-radius: 14px 0 0 14px; border-right: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.bn-right { border-radius: 0 14px 14px 0; border-left: 0; display: flex; align-items: center; gap: 6px; }
.bn-left .lvl { display: flex; justify-content: space-between; font: 700 13px var(--title); }
.bn-left .lvl span { font: 700 11px var(--body); color: var(--ink2); }
.bn-left .xp { height: 9px; } .bn-left .xp > i { background: linear-gradient(180deg, #ffcf7a, var(--orange2)); }
.hpbar { position: relative; height: 16px; border-radius: 8px; background: #3b1410; border: 1px solid #2b0d08; overflow: hidden; }
.hpbar i { position: absolute; left: 0; top: 0; bottom: 0; transition: width .12s; }
.hpbar .hpf { background: linear-gradient(180deg, #ff7d61, #c32313); }
.hpbar .shf { background: rgba(150,215,255,.75); width: 0; }
.hpbar span { position: absolute; inset: 0; text-align: center; font: 800 11px/14px var(--body); color: #fff; text-shadow: 0 1px 2px #000; }
.bn-mid { position: relative; margin: 0 -6px; z-index: 1; }
.bn-portrait { position: relative; width: 96px; height: 96px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #fff4d6, #d8c391); border: 4px solid #8d6a2e; box-shadow: 0 0 0 2px #2b241c, 0 6px 16px rgba(0,0,0,.5); overflow: hidden; }
.bn-portrait img { position: absolute; left: 50%; top: 6px; width: 120%; transform: translateX(-50%); }
.bn-heart { position: absolute; left: 50%; bottom: 82px; transform: translateX(-50%); z-index: 2; width: 44px; height: 40px; display: grid; place-items: center; font: 900 14px var(--title); color: #fff; text-shadow: 0 1px 2px #000; background: radial-gradient(circle at 50% 40%, #ff6a55, #b0160b); clip-path: path('M22 38 C 4 24 0 16 2 9 C 4 2 14 0 22 9 C 30 0 40 2 42 9 C 44 16 40 24 22 38 Z'); }
.slot { position: relative; width: 52px; height: 52px; cursor: pointer; }
.slot .ico { width: 52px; height: 52px; }
.slot .cd { position: absolute; inset: 5px; border-radius: 7px; background: conic-gradient(rgba(20,14,8,.62) var(--p, 0%), transparent 0); pointer-events: none; }
.slot .cdt { position: absolute; inset: 0; display: grid; place-items: center; font: 900 20px var(--title); color: #fff; text-shadow: 0 0 3px #000, 0 2px 2px #000; pointer-events: none; }
.slot .key { position: absolute; left: -3px; top: -5px; z-index: 2; }
.slot .rk { position: absolute; right: -2px; bottom: -4px; z-index: 2; min-width: 18px; height: 16px; border-radius: 8px; background: #3a3127; color: var(--gold2); font: 800 10px/16px var(--body); text-align: center; border: 1px solid #c79a4c; }
.slot .au { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); z-index: 2; font: 800 8px/12px var(--body); padding: 0 4px; border-radius: 6px; background: #2c6b27; color: #fff; }
.slot.manual .au { background: #7a5b2c; }
.slot.empty { border-radius: 10px; background: rgba(58,48,36,.12); border: 1px dashed rgba(58,48,36,.35); }
.slot.awk::after { content: '★'; position: absolute; right: 0; top: -6px; z-index: 3; color: #ffc93a; font-size: 15px; text-shadow: 0 0 4px #000; }
.roll { width: 46px; height: 46px; border-radius: 50%; margin-left: 4px; position: relative; background: radial-gradient(circle at 40% 35%, #cfe9ff, #2f6aa8); border: 3px solid #8d6a2e; box-shadow: 0 2px 4px rgba(0,0,0,.4); }
.roll i { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(rgba(20,14,8,.72) var(--p, 0%), transparent 0); }
.roll::after { content: '⤳'; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 22px; text-shadow: 0 1px 2px #000; }
.minimap { position: absolute; right: 10px; top: 58px; width: 200px; height: 120px; border-radius: 12px; border: 3px solid #8d6a2e; box-shadow: 0 0 0 1px #2b241c, 0 6px 16px rgba(0,0,0,.5); background: #000; pointer-events: auto; }
.hud-dofus { position: absolute; right: 10px; top: 186px; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.hud-dofus .d { display: flex; align-items: center; gap: 6px; padding: 3px 8px 3px 3px; border-radius: 999px; background: rgba(43,36,28,.85); color: #fff1d2; font: 700 11px var(--body); }
.egg { display: inline-block; width: 18px; height: 22px; border-radius: 50% / 45%; box-shadow: inset -3px -4px 5px rgba(0,0,0,.35), inset 3px 3px 4px rgba(255,255,255,.5); }
.centerbanner { position: absolute; top: 24%; left: 0; right: 0; text-align: center; opacity: 0; transform: scale(.92); transition: opacity .35s, transform .35s; pointer-events: none; }
.centerbanner.show { opacity: 1; transform: scale(1); }
.centerbanner b { display: block; font: 900 58px var(--title); color: #ffdf8a; text-shadow: 0 4px 0 #5c3510, 0 0 30px rgba(0,0,0,.85); }
.centerbanner small { font: 700 20px var(--body); color: #fff1d2; text-shadow: 0 2px 4px #000; }
.toasts { position: absolute; top: 150px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
.toast { padding: 7px 16px; border-radius: 999px; background: rgba(43,36,28,.9); border: 1px solid #8d6a2e; color: #fff1d2; font: 700 14px var(--body); animation: tin .25s ease-out; }
.toast.gold { color: #3a2a0c; background: linear-gradient(180deg, #ffe39a, #e8b64c); border-color: #8d6a2e; }
@keyframes tin { from { opacity: 0; transform: translateY(-8px); } }
.downmsg { position: absolute; bottom: 130px; left: 50%; transform: translateX(-50%); padding: 10px 18px; border-radius: 12px; background: rgba(70,12,8,.9); border: 2px solid #c8331f; text-align: center; color: #fff1d2; }
.downmsg b { display: block; font: 900 24px var(--title); color: #ffdf8a; }
.joy { position: absolute; width: 130px; height: 130px; margin: -65px 0 0 -65px; border-radius: 50%; border: 3px solid rgba(255,235,190,.45); background: rgba(43,36,28,.25); pointer-events: none; }
.joy i { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff1d2, #b9a77c); }
.boss-intro { position: fixed; inset: 0; z-index: 8; pointer-events: none; display: grid; place-items: center; }
.boss-intro .card { display: flex; align-items: center; gap: 18px; padding: 14px 30px 14px 14px; border-radius: 16px; background: linear-gradient(90deg, rgba(43,36,28,.95), rgba(90,20,12,.92)); border: 2px solid #d6a84c; box-shadow: 0 0 40px rgba(255,90,40,.45); animation: bin 2.8s ease forwards; }
.boss-intro img { width: 150px; height: 150px; object-fit: contain; filter: drop-shadow(0 4px 8px #000); }
.boss-intro small { font: 800 12px var(--body); letter-spacing: 3px; color: var(--orange); }
.boss-intro b { display: block; font: 900 36px var(--title); color: #ffdf8a; }
@keyframes bin { 0% { opacity: 0; transform: translateX(-60px); } 12% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(40px); } }

/* ---------------------------------------------------------------- level-up */
.overlay { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; background: rgba(10,8,5,.55); padding: 12px; }
.lvl-win { width: min(1060px, 98vw); max-height: 96vh; }
.lvl-body { display: grid; grid-template-columns: 1fr 250px; gap: 14px; padding: 16px; overflow: auto; }
.card-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; align-items: stretch; }
.card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 34px 12px 14px; border-radius: 12px; background: linear-gradient(180deg, #fbf5e2, #efe3c2); border: 2px solid #b9a77c; box-shadow: 0 4px 0 #b9a77c, 0 8px 18px rgba(0,0,0,.18); cursor: pointer; text-align: center; transition: transform .12s, border-color .12s, box-shadow .12s; animation: cin .3s ease-out backwards; }
.card:nth-child(2) { animation-delay: .06s; } .card:nth-child(3) { animation-delay: .12s; } .card:nth-child(4) { animation-delay: .18s; }
@keyframes cin { from { opacity: 0; transform: translateY(18px); } }
.card:hover { transform: translateY(-5px); border-color: var(--orange); box-shadow: 0 6px 0 var(--orange2), 0 14px 28px rgba(0,0,0,.25); }
.card .num { position: absolute; left: 10px; top: 10px; }
.card .help { position: absolute; right: 10px; top: 9px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #4a3f30; color: #fff1d2; font: 800 12px var(--body); }
.card .ban { position: absolute; right: 38px; top: 9px; padding: 2px 8px; border-radius: 999px; border: 0; background: #8f2a1a; color: #fff; font: 800 10px var(--body); cursor: pointer; }
.card h4 { font-size: 19px; color: var(--ink); }
.card .ico { width: 76px; height: 76px; }
.card .eff { font: 800 16px var(--body); color: #2c7a2a; }
.card .det { width: 100%; padding: 6px 8px; border-radius: 8px; background: rgba(58,48,36,.08); font-size: 12px; color: var(--ink2); text-align: left; }
.card .det b { color: #2c7a2a; float: right; }
.card p { margin: 0; font-size: 14px; color: var(--ink); line-height: 1.3; }
.card .pips { display: flex; gap: 4px; align-items: center; margin-top: auto; font: 700 11px var(--body); color: var(--ink2); }
.card .pips i { width: 9px; height: 9px; transform: rotate(45deg); border: 1px solid #b06a24; background: #f5e7c8; }
.card .pips i.on { background: var(--orange); }
.card.k-awaken { background: linear-gradient(180deg, #fff6d6, #f6dc8e); border-color: #c99a2e; box-shadow: 0 4px 0 #c99a2e, 0 0 26px rgba(255,200,80,.45); }
.card.k-curse { background: linear-gradient(180deg, #f6e4e7, #e2c2c9); border-color: #9a4458; box-shadow: 0 4px 0 #9a4458; }
.bigsym { width: 76px; height: 76px; display: grid; place-items: center; font-size: 38px; border-radius: 16px; color: #fff; background: radial-gradient(circle at 40% 30%, #a3b8d6, #3d5a85); border: 3px solid #c79a4c; }
.k-heal .bigsym { background: radial-gradient(circle at 40% 30%, #ffb3a6, #b52a1b); }
.k-curse .bigsym { background: radial-gradient(circle at 40% 30%, #c28ad6, #4b1d5c); }
.lvl-side { display: flex; flex-direction: column; gap: 8px; }
.lvl-side .box { padding: 8px 10px; font-size: 12px; }
.lvl-side .box div { display: flex; justify-content: space-between; padding: 2px 0; }
.lvl-side h4 { font-size: 13px; color: var(--ink2); margin-bottom: 4px; }
.lvl-foot { display: flex; justify-content: center; align-items: center; font-size: 13px; gap: 10px; padding: 10px; border-top: 1px solid var(--parch-line); background: var(--parch2); }
.hint { margin-top: 10px; padding: 8px 12px; border-radius: 8px; background: rgba(58,48,36,.07); font-size: 13px; }
.hint b { font: 800 10px var(--body); letter-spacing: 1px; padding: 2px 6px; border-radius: 4px; background: #4a3f30; color: var(--gold2); margin-right: 6px; }

/* ---------------------------------------------------------------- other windows */
.modal { width: min(560px, 94vw); max-height: 90vh; }
.modal.wide { width: min(980px, 96vw); height: min(720px, 92vh); }
.paces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pace { padding: 12px; border-radius: 10px; background: #f7f0da; border: 2px solid var(--parch-line); text-align: center; cursor: pointer; }
.pace.on { border-color: var(--orange); background: #fff3dd; box-shadow: 0 0 0 2px rgba(243,146,55,.3); }
.pace b { display: block; font: 700 17px var(--title); }
.pace p { margin: 6px 0 0; font-size: 13px; color: var(--ink2); }
.diffs { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.diffs button { flex: 1; padding: 8px; border-radius: 8px; border: 1px solid var(--parch-line); background: #f7f0da; font: 700 13px var(--body); cursor: pointer; }
.diffs button.on { background: #4a3f30; color: var(--gold2); border-color: #2b241c; }
.optrow { display: grid; grid-template-columns: 1fr 1.3fr; gap: 10px; align-items: center; margin: 10px 0; }
.optrow.check { display: flex; gap: 8px; }
.tabs { display: flex; gap: 4px; padding: 8px 16px 0; background: var(--parch2); border-bottom: 1px solid var(--parch-line); flex-wrap: wrap; }
.tabs button { font: 700 14px var(--title); padding: 8px 14px; border: 1px solid var(--parch-line); border-bottom: 0; border-radius: 8px 8px 0 0; background: #e8dcbb; color: var(--ink2); cursor: pointer; }
.tabs button.on { background: var(--parch); color: var(--ink); }
.shop-cat { margin: 10px 0 6px; font: 700 18px var(--title); color: var(--ink); }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 8px; }
.upg { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 10px; background: #f7f0da; border: 1px solid var(--parch-line); }
.upg .info { flex: 1; min-width: 0; } .upg .info small { display: block; color: var(--ink2); }
.pips2 { display: flex; gap: 3px; margin-top: 5px; } .pips2 i { width: 12px; height: 5px; border-radius: 2px; background: rgba(58,48,36,.18); } .pips2 i.on { background: var(--orange); }
.upg .btn { min-width: 96px; }
.achs { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.ach { padding: 8px 10px; border-radius: 8px; background: #f7f0da; border: 1px solid var(--parch-line); font-size: 12px; opacity: .55; }
.ach.ok { opacity: 1; border-color: #c99a2e; background: #fff6d6; }
.ach b { display: block; font-size: 13px; } .ach .rw { color: #2c7a2a; } .ach .tt { color: #8a4bb8; }
.clsrow { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; background: #f7f0da; border: 1px solid var(--parch-line); margin-bottom: 6px; }
.clsrow img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; object-position: top; background: #e9dcb7; border: 2px solid #c79a4c; }
.clsrow .bar { flex: 1; height: 10px; } .clsrow .bar > i { background: linear-gradient(180deg, #8fd2ff, #2f79c8); }
.dofus-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.dofus { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; background: #f7f0da; border: 1px solid var(--parch-line); cursor: pointer; font-size: 12px; }
.dofus .egg { width: 30px; height: 38px; flex: 0 0 auto; }
.dofus.eq { border: 2px solid var(--orange); background: #fff3dd; }
.dofus.no { cursor: default; } .dofus.no > div { opacity: .6; }
.board h4 { font-size: 16px; margin: 12px 0 4px; }
.board table, .res-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.board td, .res-table td, .res-table th { padding: 5px 6px; border-bottom: 1px solid rgba(58,48,36,.1); text-align: left; }
.res-table th { font: 800 11px var(--body); color: var(--ink2); text-transform: uppercase; letter-spacing: .5px; }
.res-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-bottom: 12px; }
.res-sum .s { padding: 10px; border-radius: 10px; background: #f7f0da; border: 1px solid var(--parch-line); text-align: center; font-size: 12px; color: var(--ink2); }
.res-sum .s b { display: block; font: 900 28px var(--title); color: var(--ink); }
.reward { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.reward .s { padding: 8px 12px; border-radius: 10px; background: #fff3dd; border: 1px solid #e3b57a; }
.zones-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.zones-list .z { padding: 9px; border-radius: 10px; background: #f7f0da; border: 1px solid var(--parch-line); font-size: 13px; }
.zones-list .z.lock { opacity: .5; }
.pause-spells { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 12px; }
.pause-spells .ps { display: flex; gap: 8px; align-items: center; padding: 6px; border-radius: 8px; background: #f7f0da; border: 1px solid var(--parch-line); font-size: 13px; }
.pause-spells label { margin-left: auto; font-size: 11px; display: flex; align-items: center; gap: 4px; }
.conn { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); padding: 8px 14px; border-radius: 8px; background: #8f2a1a; color: #fff; z-index: 60; }
.help-list li { margin: 8px 0; line-height: 1.4; }
.tip { position: fixed; z-index: 70; max-width: 300px; padding: 8px 10px; border-radius: 8px; background: rgba(43,36,28,.96); color: #fff1d2; font-size: 13px; pointer-events: none; border: 1px solid #8d6a2e; }
.tip b { color: var(--gold2); font-family: var(--title); }

.bn-lv { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); min-width: 36px; height: 36px; padding: 0 6px; border-radius: 18px; display: grid; place-items: center; z-index: 2;
  font: 900 17px var(--title); color: #3a2a0c; background: radial-gradient(circle at 40% 30%, #fff3c4, #f0c35a 55%, #b07a22); border: 2px solid #5d4214; box-shadow: 0 3px 8px rgba(0,0,0,.45); }
.bn-lv.pop { animation: pop .6s ease-out; }
@keyframes pop { 0% { transform: translateX(-50%) scale(1); } 35% { transform: translateX(-50%) scale(1.6); box-shadow: 0 0 26px #ffd35a; } 100% { transform: translateX(-50%) scale(1); } }
.spellbar { display: flex; gap: 8px; align-items: center; }
.lvbadge { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font: 900 20px var(--title); color: #3a2a0c; background: radial-gradient(circle at 40% 30%, #fff3c4, #f0c35a 55%, #b07a22); border: 2px solid #2b241c; box-shadow: 0 0 18px rgba(255,200,90,.5); }
.lockb { position: absolute; right: -4px; bottom: -4px; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 10px; background: #2b241c; color: #fff1d2; font: 800 11px/20px var(--body); text-align: center; border: 1px solid #8d7a54; }
.lockb::before { content: '🔒'; font-size: 9px; margin-right: 1px; }
.lvb { position: absolute; right: -3px; bottom: -3px; min-width: 16px; height: 16px; border-radius: 8px; background: #3a3127; color: var(--gold2); font: 800 10px/16px var(--body); text-align: center; border: 1px solid #c79a4c; }
.zone-boss { display: flex; flex-direction: column; align-items: center; min-width: 130px; padding: 8px 14px 10px; border-radius: 12px; background: rgba(30,25,18,.72); border: 1px solid #8d6a2e; color: #fff1d2; text-align: center; }
.zone-boss img { height: 84px; max-width: 150px; object-fit: contain; filter: drop-shadow(0 3px 4px #000); }
.zone-boss.big { border-color: #d6a84c; box-shadow: 0 0 22px rgba(255,120,60,.25); }
.zone-boss.big img { height: 110px; max-width: 190px; }
.zone-boss small { font: 800 10px var(--body); letter-spacing: 2px; color: var(--orange); margin-top: 4px; }
.zone-boss b { font: 700 14px var(--title); }
.pace.dis { opacity: .5; cursor: default; }
.room-item small { display: block; color: var(--ink2); }
.mate span { white-space: nowrap; }
.ps b { font-size: 14px; }
.records div b { font-family: var(--title); }
.mode-card .art img { width: auto; max-width: 92%; max-height: 92%; }
.ico.lock::after { content: ''; position: absolute; inset: 0; border-radius: 10px; background: rgba(40,30,20,.35); }

.zone-quests { position: absolute; right: 14px; top: 90px; width: 290px; max-height: calc(100% - 200px); z-index: 1; }
.zone-quests .win-h { padding: 8px 12px; }
.zone-quests .ql { padding: 6px 8px; overflow: auto; }
.zone-quests .q { padding: 5px 6px; border-bottom: 1px solid rgba(58,48,36,.1); font-size: 12px; display: flex; flex-wrap: wrap; align-items: center; }
.zone-quests .q .qn { flex: 1; } .zone-quests .q .qk { font-weight: 800; color: #8b5d00; }
.zone-quests .q.ok { color: #2c6b27; } .zone-quests .q.ok .qk { color: #2c6b27; opacity: .7; }
.zone-quests .qb { flex-basis: 100%; height: 4px; margin-top: 3px; border-radius: 2px; background: rgba(58,48,36,.15); overflow: hidden; } .zone-quests .qb i { display: block; height: 100%; background: var(--orange); }
/* ---------------------------------------------------------------- equipment, loot, merchant, pets, daily */
.ico.iico { background-image: url(../assets/ui/items.webp); background-repeat: no-repeat; background-color: #fbf6e6; border: 3px solid #8f8678; border-radius: 12px; box-shadow: inset 0 0 10px rgba(0,0,0,.12); }
.badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--orange2); color: #fff; font: 800 11px/18px var(--body); font-style: normal; border: 1px solid #fff3; }
#b-bag { position: relative; }
.loots { position: absolute; right: 10px; top: 236px; width: 330px; display: flex; flex-direction: column; gap: 8px; pointer-events: auto; }
.lootpop { padding: 8px 10px 10px; border-radius: 12px; background: linear-gradient(180deg, #fbf5e2, #efe3c2); border: 2px solid #b9a77c; box-shadow: 0 8px 20px rgba(0,0,0,.4); animation: lin .3s ease-out; transition: opacity .4s, transform .4s; }
.lootpop.out { opacity: 0; transform: translateX(30px); }
.lootpop.r1 { border-color: #2f79c8; } .lootpop.r2 { border-color: #8a4bb8; box-shadow: 0 0 22px rgba(160,90,220,.45); } .lootpop.r3 { border-color: #d9631b; box-shadow: 0 0 28px rgba(255,140,40,.6); }
.lootpop .lt { font: 800 10px var(--body); letter-spacing: 2px; color: var(--orange2); }
@keyframes lin { from { opacity: 0; transform: translateX(40px); } }
.icard { display: flex; gap: 10px; align-items: flex-start; }
.icard .grow { flex: 1; min-width: 0; }
.icard b { display: block; font: 700 15px var(--title); }
.icard small { display: block; color: var(--ink2); font-size: 11px; }
.icard .lines { font-size: 12px; margin-top: 3px; color: var(--ink); }
.icard .lines b { display: inline; font: 800 12px var(--body); color: #2c7a2a; }
.eq-grid { display: grid; grid-template-columns: 330px 1fr; gap: 16px; }
.eqh { font-size: 15px; margin-bottom: 6px; }
.doll { position: relative; height: 380px; border-radius: 12px; background: radial-gradient(ellipse at 50% 60%, #fff6dc, #e4d6b0 70%); border: 1px solid var(--parch-line); overflow: hidden; }
.doll .dollart { position: absolute; left: 50%; top: 40px; height: 300px; transform: translateX(-50%); opacity: .55; filter: sepia(.4); }
.dslot { position: absolute; width: 64px; height: 64px; }
.dslot .empty { width: 58px; height: 58px; border-radius: 12px; border: 2px dashed rgba(58,48,36,.3); display: grid; place-items: center; font: 700 9px var(--body); color: var(--ink2); text-align: center; background: rgba(255,255,255,.35); }
.dslot .sell { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); padding: 1px 6px; border-radius: 8px; border: 0; background: #4a3f30; color: var(--gold2); font: 800 10px var(--body); cursor: pointer; }
.s-hat { left: 133px; top: 10px; } .s-amulet { left: 20px; top: 70px; } .s-cape { left: 246px; top: 70px; }
.s-ring1 { left: 20px; top: 160px; } .s-ring2 { left: 246px; top: 160px; } .s-belt { left: 20px; top: 250px; } .s-shield { left: 246px; top: 250px; } .s-boots { left: 133px; top: 300px; }
.bag { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow: auto; padding-right: 4px; }
.bag .icard { padding: 6px 8px; border-radius: 10px; background: #f7f0da; border: 1px solid var(--parch-line); }
.setb { padding: 6px 8px; border-radius: 8px; background: #fff6d6; border: 1px solid #e3c47a; margin-bottom: 6px; font-size: 12px; }
.shop-offers { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.offer { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 10px; background: #f7f0da; border: 1px solid var(--parch-line); }
.offer .grow { flex: 1; min-width: 0; } .offer b { display: block; font: 700 14px var(--title); } .offer small { color: var(--ink2); font-size: 12px; } .offer small b { display: inline; font: 800 12px var(--body); color: #2c7a2a; }
.offer.sold { opacity: .55; }
.petrow { display: flex; flex-wrap: wrap; gap: 6px; }
.pet { position: relative; width: 58px; height: 58px; border-radius: 12px; background: radial-gradient(circle at 50% 40%, #fff6dc, #e2d3ab); border: 2px solid #b9a77c; display: grid; place-items: center; cursor: pointer; overflow: hidden; }
.pet img { max-width: 48px; max-height: 48px; }
.pet em { position: absolute; right: 2px; bottom: 1px; font: 800 10px var(--body); font-style: normal; color: var(--ink); }
.pet.sel { border-color: var(--orange); box-shadow: 0 0 0 2px rgba(243,146,55,.4), 0 0 14px rgba(243,146,55,.5); }
.pet.lock img { filter: grayscale(1) brightness(.6); } .pet.none { font-size: 20px; color: var(--ink2); }
.pets-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
.petcard { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 10px; background: #f7f0da; border: 1px solid var(--parch-line); }
.petcard.sel { border: 2px solid var(--orange); background: #fff3dd; } .petcard.lock { opacity: .7; } .petcard.lock img { filter: grayscale(1); }
.petcard .pa { width: 64px; height: 64px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; background: radial-gradient(circle at 50% 40%, #fff6dc, #e2d3ab); }
.petcard .pa img { max-width: 58px; max-height: 58px; }
.petcard .info { flex: 1; min-width: 0; } .petcard small { display: block; color: var(--ink2); font-size: 12px; }
.mode-card.daily { border-color: #c99a2e; box-shadow: var(--shadow), 0 0 26px rgba(255,190,70,.35); }
.mode-card.daily .art { background: radial-gradient(ellipse at 50% 70%, rgba(255,220,130,.45), transparent 70%), linear-gradient(180deg, #6d4e86, #2f2238); position: relative; }
.mode-card .ribbon { position: absolute; top: 12px; right: -30px; transform: rotate(35deg); padding: 3px 34px; background: var(--orange2); color: #fff; font: 800 12px var(--body); letter-spacing: 1px; }

@media (max-width: 900px) {
  .loots { width: 92vw; right: 4vw; top: auto; bottom: 100px; } .eq-grid { grid-template-columns: 1fr; } .shop-offers { grid-template-columns: 1fr; }
  body.in-flow .topbar { display: none; }
  .flow-top { top: 8px; padding: 0 8px; }
  .flow-top .back { padding: 8px 12px; font-size: 12px; margin-right: 6px; }
  .stepper .st { padding: 4px 6px 4px 4px; font-size: 10px; } .stepper .st:not(.cur) { font-size: 0; gap: 0; padding: 4px; } .stepper .sep { width: 6px; }
  .step { inset: 56px 0 0 0; }
  .home-nav .btn.orange { order: -1; flex-basis: 100%; justify-content: center; }
  .cls-detail { display: block; overflow: auto; }
  .cls-detail .records { margin-top: 12px; }
  .zone-title { top: 2%; width: 92vw; } .zone-title .best { flex-wrap: wrap; justify-content: center; gap: 4px 12px; font-size: 12px; }
  .zone-arrow { width: 46px; height: 46px; font-size: 22px; top: 40%; } .zone-arrow small { display: none; }
  .zone-mid { top: 49%; width: 94vw; } .zone-mid .mobs img { height: 30px; } .zone-boss { min-width: 0; padding: 6px 8px; } .zone-boss img { height: 56px; } .zone-boss.big img { height: 70px; } .zone-boss b { font-size: 12px; }
  .zone-quests { display: none; }
  .zone-bottom { left: 8px; right: 8px; bottom: 10px; } .hero-chip { display: none; } .zone-bottom > div { width: 100%; justify-content: space-between; } .zone-bottom .btn.big { font-size: 14px; padding: 10px 14px; }
  .team-win { top: 56px; transform: translateX(-50%); max-height: calc(100% - 66px); }
  .seg button { padding: 10px 4px; font-size: 13px; }
  .home-logo { top: 8%; } .home-logo .b { font-size: 64px; } .home-logo .a { font-size: 20px; }
  .home-nav { gap: 6px; bottom: 16px; flex-wrap: wrap; justify-content: center; width: 96vw; }
  .home-nav .btn { font-size: 12px; padding: 8px 10px; } .home-nav .btn.huge { font-size: 20px; padding: 12px 34px; }
  .rooms-win { display: none; } .side-col { display: none; }
  .modes { flex-direction: column; inset: 60px 4vw 20px; overflow: auto; } .mode-card .art { min-height: 120px; }
  .cls-strip { flex-wrap: wrap; } .cls-card { width: 15vw; }
  .cls-detail { grid-template-columns: 1fr; overflow: auto; top: 220px; } .cls-detail .stage { display: none; }
  .zone-title h2 { font-size: 36px; } .zone-arrow.l { left: 4%; } .zone-arrow.r { right: 4%; }
  .bn-left { width: 150px; } .slot, .slot .ico { width: 40px; height: 40px; } .bn-portrait { width: 70px; height: 70px; } .bn-heart { bottom: 58px; }
  .minimap { width: 120px; height: 72px; top: 52px; } .hud-dofus { display: none; }
  .statpanel { display: none; }
  .lvl-body { grid-template-columns: 1fr; } .lvl-side { display: none; }
  .card-list { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------- village (home) */
#scr-home .home-logo { top: 8px; transform: translateX(-50%) scale(.42); transform-origin: 50% 0; opacity: .92; }
#scr-home .home-logo .tagline { display: none; }
.hub-prompt { position: absolute; left: 50%; bottom: 112px; transform: translateX(-50%); padding: 8px 16px; border-radius: 12px; background: rgba(43,36,28,.9); border: 1px solid #c79a4c; color: #ffe9b8; font: 600 15px var(--body); white-space: nowrap; box-shadow: 0 6px 20px rgba(0,0,0,.4); pointer-events: none; }
.hub-prompt small { color: #d8c9a2; margin-left: 6px; } .hub-prompt small.bad { color: #ff9d86; } .hub-prompt .kbd { margin-right: 8px; }
.hub-feed { position: absolute; left: 80px; bottom: 240px; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.hfeed { display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 10px; background: linear-gradient(180deg, #fbf5e2, #efe3c2); border: 1px solid #b9a77c; color: var(--ink); font: 600 13px var(--body); animation: lin .25s ease-out; transition: opacity .5s, transform .5s; box-shadow: 0 4px 12px rgba(0,0,0,.3); }
.hfeed small { color: #6a7d2a; font-weight: 800; margin-left: 4px; } .hfeed.out { opacity: 0; transform: translateX(-20px); }
.hub-chat { position: absolute; left: 80px; bottom: 30px; width: 330px; padding: 6px 8px; border-radius: 12px; background: rgba(43,36,28,.72); border: 1px solid rgba(199,154,76,.6); color: #f2e6c8; font: 13px var(--body); }
.hub-chat .hc-h { display: flex; justify-content: space-between; color: #ffd57a; font: 700 12px var(--title); margin-bottom: 2px; } .hub-chat .hc-h small { color: #d8c9a2; font: 600 11px var(--body); }
.hub-log { max-height: 110px; overflow: hidden; } .hub-log b { color: #ffd57a; }
.hub-chat input { width: 100%; margin-top: 4px; padding: 5px 8px; border-radius: 8px; border: 1px solid #8d7a54; background: rgba(251,243,220,.92); font: 13px var(--body); }
.ico.rico { background-image: url(../assets/ui/res.webp); background-repeat: no-repeat; background-color: #fbf6e6; border: 2px solid #b9a77c; border-radius: 10px; position: relative; display: inline-block; vertical-align: middle; flex: none; }
.ico.rico .q { position: absolute; right: -3px; bottom: -5px; padding: 0 4px; border-radius: 7px; background: #4a3f30; color: #ffe39a; font: 800 10px/15px var(--body); font-style: normal; border: 1px solid #c79a4c; }
.jobs { display: grid; grid-template-columns: 250px 1fr; gap: 14px; min-height: 420px; }
.jlist { display: flex; flex-direction: column; gap: 6px; }
.jrow { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--parch-line); background: #fbf3dc; cursor: pointer; }
.jrow.on { border-color: #c77a16; background: #fff1c9; box-shadow: 0 0 0 2px rgba(240,140,30,.35); }
.jrow .grow { min-width: 0; } .lvlp { font: 800 11px var(--body); color: #8b5d00; } .lvlp.bad { color: #c0392b; }
.xpb { height: 6px; border-radius: 3px; background: #e2d4ae; margin-top: 4px; overflow: hidden; } .xpb i { display: block; height: 100%; background: linear-gradient(90deg, #f2c94c, #e08a1e); }
.jhead { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; } .jhead h3 { margin: 0; font: 700 20px var(--title); }
.nodes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.node { display: flex; gap: 8px; align-items: center; padding: 6px; border-radius: 10px; background: #fbf3dc; border: 1px solid var(--parch-line); font-size: 13px; } .node.locked { opacity: .5; filter: grayscale(.6); }
.rhead { display: flex; align-items: center; gap: 10px; margin-top: 10px; } .rhead input#v-q { padding: 5px 8px; border-radius: 8px; border: 1px solid #b9a77c; background: #fffaf0; font: 13px var(--body); }
.recs { display: flex; flex-direction: column; gap: 6px; max-height: 52vh; overflow: auto; padding-right: 4px; }
.rec { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 12px; background: #fbf3dc; border: 1px solid var(--parch-line); } .rec.no { opacity: .78; }
.rec .grow { min-width: 0; } .rbtn { display: flex; flex-direction: column; gap: 4px; }
.ings { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ing { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px 1px 1px; border-radius: 8px; background: #f3e3c0; font: 700 11px var(--body); color: #b0412a; } .ing.ok { color: #3d7a1f; background: #e5f0cf; }
.invg { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.grocer { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: #fff6d6; border: 1px solid #e3c47a; margin-bottom: 10px; }
.gitem { display: inline-flex; align-items: center; gap: 6px; } .gitem small { color: #8b5d00; font-weight: 800; }
.foodsel { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.fopt { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 4px; border-radius: 10px; border: 1px solid var(--parch-line); background: #fbf3dc; cursor: pointer; font: 600 12px var(--body); color: var(--ink); }
.fopt.on { border-color: #c77a16; background: #fff1c9; box-shadow: 0 0 0 2px rgba(240,140,30,.35); } .fopt.none { opacity: .5; }
.vitem { display: flex; gap: 8px; align-items: center; padding: 6px; border-radius: 10px; background: #fbf3dc; border: 1px solid var(--parch-line); margin-bottom: 6px; font-size: 12px; }
@media (max-width: 760px) {
  .jobs { grid-template-columns: 1fr; } .jlist { flex-direction: row; overflow-x: auto; } .jrow { min-width: 160px; }
  .hub-chat { left: 8px; width: 60vw; bottom: 96px; } .hub-feed { left: 8px; bottom: 230px; } .hub-prompt { bottom: 170px; font-size: 13px; }
}
.rec .grow, .vitem .grow, .jrow .grow { flex: 1; }
#scr-home .home-logo { display: none; }
.hub-chat { bottom: 100px; } .hub-feed { bottom: 300px; }
.qtrack { position: absolute; left: 80px; top: 62px; width: 280px; padding: 8px 10px; border-radius: 12px; background: rgba(43,36,28,.82); border: 1px solid #c79a4c; color: #f2e6c8; font: 13px var(--body); cursor: pointer; }
.qtrack .qt-h { font: 700 11px var(--title); color: #ffd57a; letter-spacing: 1px; } .qtrack b { color: #fff3c4; } .qtrack .qt-ok { color: #8dff8a; font-weight: 800; margin-top: 2px; }
.qcamp { display: flex; gap: 16px; padding: 12px; border-radius: 14px; background: linear-gradient(180deg, #fff8e4, #f1e2bd); border: 1px solid #d9bd7a; margin-bottom: 12px; }
.qnpc { width: 120px; text-align: center; flex: none; } .qsp { height: 120px; display: grid; place-items: end center; } .qsp canvas { max-width: 120px; max-height: 120px; }
.qcamp h3 { margin: 2px 0 4px; font: 700 20px var(--title); } .qch { font: 800 11px var(--body); color: #8b5d00; letter-spacing: 1px; text-transform: uppercase; }
.qd { font-style: italic; color: #5a4a32; margin: 4px 0 8px; } .qobj { font-weight: 800; margin-bottom: 4px; }
.qbar { position: relative; height: 16px; border-radius: 8px; background: #e2d4ae; overflow: hidden; margin: 4px 0; } .qbar i { display: block; height: 100%; background: linear-gradient(90deg, #8fd16a, #4ea52d); }
.qbar b { position: absolute; inset: 0; text-align: center; font: 800 11px/16px var(--body); color: #2a2216; }
.qrw { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .qrw .pill { display: inline-flex; align-items: center; gap: 4px; }
.qcols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.qrow { display: flex; gap: 10px; padding: 8px; border-radius: 12px; background: #fbf3dc; border: 1px solid var(--parch-line); margin-bottom: 8px; } .qrow.done { opacity: .55; } .qrow .grow { flex: 1; } .qbtn { display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 760px) { .qcols { grid-template-columns: 1fr; } .qtrack { left: 8px; width: 60vw; top: 54px; } .qcamp { flex-direction: column; } }
.gcols { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; } .gbox { padding: 10px; border-radius: 12px; background: #fbf3dc; border: 1px solid var(--parch-line); }
.gbox h3, .ghead h3 { margin: 0 0 8px; font: 700 18px var(--title); }
.gform { display: flex; gap: 14px; } .gform label { display: block; font: 700 12px var(--body); margin-bottom: 6px; } .gform input { display: block; width: 100%; padding: 5px 8px; border-radius: 8px; border: 1px solid #b9a77c; background: #fffaf0; font: 14px var(--body); }
.gprev { width: 130px; text-align: center; flex: none; } .gprev b { display: block; font: 700 14px var(--title); } .gprev small { color: #8b5d00; font-weight: 800; }
.gpick { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 8px; } .gpick button { border: 2px solid transparent; border-radius: 8px; background: #efe3c2; cursor: pointer; padding: 2px; line-height: 0; }
.gpick button.sym { width: 30px; height: 30px; font: 18px Georgia, serif; line-height: 1; color: #3b2a12; } .gpick button.col { width: 22px; height: 22px; } .gpick button.on { border-color: #c77a16; box-shadow: 0 0 0 2px rgba(240,140,30,.35); }
.grow-row { display: flex; gap: 10px; align-items: center; padding: 6px; border-radius: 10px; background: #fffaf0; border: 1px solid var(--parch-line); margin-bottom: 6px; } .grow-row .grow { flex: 1; } .grow-row .rk { width: 22px; text-align: center; font: 800 16px var(--title); color: #8b5d00; }
.ghead { display: flex; gap: 14px; align-items: center; padding: 10px; border-radius: 14px; background: linear-gradient(180deg, #fff8e4, #f1e2bd); border: 1px solid #d9bd7a; } .ghead .grow { flex: 1; } .gacts { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.gseg { margin: 10px 0; } .gbody { min-height: 260px; }
.gmem { display: flex; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 10px; background: #fbf3dc; border: 1px solid var(--parch-line); margin-bottom: 5px; } .gmem .grow { flex: 1; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: #a39a88; } .dot.on { background: #4ea52d; box-shadow: 0 0 6px #7dff7a; }
.ginv { display: flex; gap: 6px; margin: 6px 0; } .ginv input { flex: 1; padding: 5px 8px; border-radius: 8px; border: 1px solid #b9a77c; background: #fffaf0; font: 13px var(--body); }
.perks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; } .perk { padding: 8px; border-radius: 12px; background: #fbf3dc; border: 1px solid var(--parch-line); display: flex; flex-direction: column; gap: 4px; }
.perk .pips { display: flex; gap: 3px; } .perk .pips i { width: 14px; height: 6px; border-radius: 3px; background: #e2d4ae; } .perk .pips i.on { background: #e08a1e; }
.gchat { height: 260px; overflow: auto; padding: 8px; border-radius: 10px; background: #fffaf0; border: 1px solid var(--parch-line); font-size: 13px; } .gchat b { color: #8b5d00; }
.glog { max-height: 160px; overflow: auto; font-size: 12px; }
@media (max-width: 760px) { .gcols { grid-template-columns: 1fr; } .gform { flex-direction: column; } }
.mhead { display: flex; gap: 16px; align-items: flex-start; padding: 8px 10px; border-radius: 12px; background: #fff6d6; border: 1px solid #e3c47a; margin-bottom: 10px; } .mhead .grow { flex: 1; }
.mbreed { display: flex; gap: 8px; align-items: center; padding: 8px; border-radius: 12px; background: #ffe8ef; border: 1px solid #e3a1b5; margin-bottom: 10px; } .mbreed select { padding: 4px; border-radius: 8px; font: 13px var(--body); }
.mlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 10px; }
.mcard { display: flex; gap: 10px; padding: 8px; border-radius: 12px; background: #fbf3dc; border: 1px solid var(--parch-line); } .mcard .grow { flex: 1; min-width: 0; }
.mcard.ride { border-color: #c77a16; box-shadow: 0 0 0 2px rgba(240,140,30,.35); } .mcard.fert { background: #fff1f4; }
.mspr { width: 96px; height: 100px; display: grid; place-items: end center; flex: none; background: radial-gradient(ellipse at 50% 85%, rgba(0,0,0,.18), transparent 60%); }
.mname { cursor: pointer; } .sex { font-weight: 900; } .sex.F { color: #c2185b; } .sex.M { color: #2f79c8; } .preg { color: #c2185b; } .ok { color: #3d7a1f; }
.mgs { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; margin: 4px 0; } .mg { display: grid; grid-template-columns: 70px 1fr 30px; align-items: center; gap: 4px; font: 11px var(--body); } .mg b { text-align: right; }
.mgb { height: 7px; border-radius: 4px; background: #e2d4ae; overflow: hidden; position: relative; } .mgb i { display: block; height: 100%; background: #6aa84f; } .mgb.love i { background: #e05a8a; } .mgb.end i { background: #e08a1e; }
.mgb.mid::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: #5a4a32; } .mgb.pos i { background: #4aa3df; } .mgb.neg i { background: #8a4bb8; }
.macts { display: flex; flex-wrap: wrap; gap: 3px; margin: 4px 0; } .macts button { padding: 2px 6px; border-radius: 7px; border: 1px solid var(--parch-line); background: #efe3c2; font: 700 11px var(--body); cursor: pointer; } .macts button.on { background: #c77a16; color: #fff; border-color: #8b5d00; }
.mbtns { display: flex; gap: 6px; align-items: center; }
.chestov { background: rgba(10,8,4,.55); }
.chestbox { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(880px, 94vw); padding: 14px; border-radius: 18px; background: linear-gradient(180deg, #4a3a22, #2b2214); border: 2px solid #c79a4c; box-shadow: 0 20px 60px rgba(0,0,0,.6); animation: lin .25s ease-out; }
.chest-h { text-align: center; color: #ffd57a; margin-bottom: 10px; } .chest-h h2 { margin: 0; font: 900 30px var(--title); letter-spacing: 2px; } .chest-h small { color: #e8d9b4; }
.chest-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ctile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 12px; border-radius: 14px; border: 3px solid #b9a77c; background: linear-gradient(180deg, #fbf5e2, #efe3c2); cursor: pointer; font: 14px var(--body); color: var(--ink); text-align: center; transition: transform .12s; }
.ctile:hover { transform: translateY(-4px) scale(1.02); } .ctile b { font: 700 16px var(--title); } .ctile .kbd { position: absolute; left: 8px; top: 8px; }
.ctile.r1 { border-color: #2f79c8; } .ctile.r2 { border-color: #8a4bb8; box-shadow: 0 0 22px rgba(160,90,220,.45); } .ctile.r3 { border-color: #d9631b; box-shadow: 0 0 28px rgba(255,140,40,.6); } .ctile.bless { border-color: #4ea52d; }
@media (max-width: 760px) { .chest-list { grid-template-columns: 1fr; } .ctile { flex-direction: row; text-align: left; } }
/* ---------------------------------------------------------------- pause */
#pause { background: rgba(10,8,4,.6); }
.pausebox { position: absolute; inset: 3vh 2vw; display: flex; flex-direction: column; border-radius: 18px; background: linear-gradient(180deg, #3d3020, #2a2216); border: 2px solid #c79a4c; box-shadow: 0 20px 60px rgba(0,0,0,.6); overflow: hidden; color: #f2e6c8; }
.pz-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 8px 14px; }
.pz-vol { display: flex; align-items: center; gap: 6px; color: #ffd57a; } .pz-vol input { width: 110px; }
.pz-title { text-align: center; } .pz-title h2 { margin: 0; font: 900 28px var(--title); letter-spacing: 4px; color: #ffd57a; } .pz-title small { color: #d8c9a2; }
.pz-acts { display: flex; justify-content: flex-end; gap: 10px; align-items: center; }
.pz-tabs { display: flex; gap: 2px; padding: 0 14px; border-bottom: 1px solid rgba(199,154,76,.5); }
.pz-tabs button { padding: 8px 14px; border: 0; border-bottom: 3px solid transparent; background: none; color: #d8c9a2; font: 700 13px var(--title); letter-spacing: 1px; cursor: pointer; text-transform: uppercase; } .pz-tabs button.on { color: #ffd57a; border-bottom-color: #e08a1e; }
.pz-body { flex: 1; min-height: 0; overflow: hidden; padding: 12px 14px; }
.pz-cols { display: grid; grid-template-columns: 1.05fr 1fr 1fr; gap: 12px; height: 100%; } .pz-cols > * { min-height: 0; }
.scroll { overflow: auto; } .pzpad { height: 100%; overflow: auto; padding: 10px; border-radius: 12px; background: var(--parch); color: var(--ink); }
.pzbox { padding: 10px; border-radius: 12px; background: linear-gradient(180deg, #fbf5e2, #efe3c2); border: 1px solid #b9a77c; color: var(--ink); margin-bottom: 10px; }
.pzbox h4 { margin: 0 0 8px; font: 700 15px var(--title); display: flex; align-items: center; gap: 8px; } .pzbox h4 .btn, .pzbox h4 .seg { margin-left: auto; }
.pzsp { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 10px; background: #fffaf0; border: 1px solid var(--parch-line); margin-bottom: 5px; } .pzsp .grow { flex: 1; min-width: 0; }
.ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .awk { color: #8a4bb8; font-weight: 800; } .kbd.ghost { visibility: hidden; }
.pzsp .mv { width: 24px; height: 24px; border-radius: 6px; border: 1px solid #b9a77c; background: #efe3c2; cursor: pointer; font-size: 10px; } .pzsp .mv:disabled { opacity: .3; }
.tog { display: inline-flex; align-items: center; gap: 4px; font: 800 11px var(--body); cursor: pointer; } .tog input { display: none; } .tog i { width: 30px; height: 16px; border-radius: 8px; background: #b9ad92; position: relative; transition: background .15s; } .tog i::after { content: ''; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: left .15s; } .tog input:checked + i { background: #4ea52d; } .tog input:checked + i::after { left: 16px; }
.pz-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pzs { display: grid; grid-template-columns: 30px 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: 6px; padding: 5px 8px; border-radius: 10px; background: #fffaf0; border: 1px solid var(--parch-line); font-size: 12px; }
.pzs .ico { grid-row: span 2; } .pzs b { font: 800 15px var(--body); } .pzs small { grid-column: 2 / 4; color: #8b7a5a; font-size: 10px; }
.seg.mini button { padding: 3px 8px; font-size: 11px; }
.pz-worn { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; margin-bottom: 6px; } .pz-empty { height: 40px; border-radius: 10px; border: 2px dashed rgba(58,48,36,.3); font: 700 8px var(--body); display: grid; place-items: center; color: var(--ink2); }
.pill.bless { background: #e5f0cf; color: #3d7a1f; } .pill.curse { background: #f6d6d0; color: #a0301e; }
.pz-foot { display: flex; padding: 10px 14px; border-top: 1px solid rgba(199,154,76,.5); }
.run-feed { position: absolute; right: 10px; top: 196px; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; pointer-events: none; }
.rfeed { display: flex; align-items: center; gap: 6px; padding: 2px 8px 2px 2px; border-radius: 10px; background: rgba(43,36,28,.82); border: 1px solid #c79a4c; color: #f2e6c8; font: 600 12px var(--body); transition: opacity .5s; } .rfeed b { color: #ffd57a; } .rfeed.out { opacity: 0; } .rfeed.bump { animation: lin .2s ease-out; }
@media (max-width: 900px) { .pz-cols { grid-template-columns: 1fr; overflow: auto; } .pz-body { overflow: auto; } .pz-worn { grid-template-columns: repeat(4, 1fr); } .pausebox { inset: 0; border-radius: 0; } .pz-top { grid-template-columns: 1fr auto; } .pz-vol { display: none; } }
.wakfu { position: relative; width: 52px; height: 52px; margin-left: 6px; cursor: pointer; flex: none; }
.wakfu svg { width: 100%; height: 100%; transform: rotate(-90deg); } .wk-bg { fill: #1f3a35; stroke: #2b2216; stroke-width: 6; } .wk-fill { fill: none; stroke: #4fe0c0; stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset .3s; }
.wakfu b { position: absolute; inset: 0; display: grid; place-items: center; color: #bffff0; font: 900 16px var(--title); text-shadow: 0 1px 2px #000; }
.wakfu.ready { animation: wkp 1s ease-in-out infinite; } .wakfu.ready .wk-bg { fill: #2a7f6c; }
@keyframes wkp { 0%,100% { filter: drop-shadow(0 0 4px #4fe0c0); } 50% { filter: drop-shadow(0 0 16px #8dffe8); } }
.chal { position: absolute; left: 50%; top: 92px; transform: translateX(-50%); min-width: 260px; max-width: 420px; padding: 6px 12px; border-radius: 12px; background: rgba(251,245,226,.94); border: 2px solid #c79a4c; text-align: center; color: var(--ink); box-shadow: 0 6px 18px rgba(0,0,0,.35); pointer-events: none; }
.chal .ch-h { font: 800 9px var(--body); letter-spacing: 3px; color: #8b5d00; } .chal b { display: block; font: 700 16px var(--title); } .chal small { display: block; font-size: 12px; color: #5a4a32; } .chal i { display: block; font-style: normal; font-weight: 800; margin-top: 2px; }
.chal.ko, .chal.lose { border-color: #c0392b; opacity: .75; } .chal.ko i, .chal.lose i { color: #c0392b; } .chal.win { border-color: #4ea52d; box-shadow: 0 0 24px rgba(120,220,90,.6); } .chal.win i { color: #3d7a1f; }
@media (max-width: 760px) { .chal { top: 70px; min-width: 200px; } }
.btn.again { display: inline-flex; align-items: center; gap: 8px; text-align: left; } .btn.again i { font-style: normal; font-size: 22px; } .btn.again small { display: block; font: 600 11px var(--body); opacity: .85; text-transform: none; letter-spacing: 0; }
/* pause in the Horde parchment identity */
.pausebox { background: var(--parch); color: var(--ink); border: 0; box-shadow: var(--shadow), 0 0 0 1px #2b241c, inset 0 0 0 3px #c8b88e; }
.pz-top { background: linear-gradient(180deg, #5d5140, #463c2f); border-bottom: 2px solid #2b241c; color: #fff1d2; }
.pz-title h2 { color: #fff4dc; letter-spacing: 2px; text-shadow: 0 2px 0 rgba(0,0,0,.4); } .pz-title small { color: var(--gold); }
.pz-tabs { background: var(--parch2); border-bottom: 1px solid var(--parch-line); padding-top: 8px; gap: 4px; }
.pz-tabs button { border: 1px solid var(--parch-line); border-bottom: 0; border-radius: 8px 8px 0 0; background: #e8dcbb; color: var(--ink2); text-transform: none; letter-spacing: 0; font: 700 14px var(--title); }
.pz-tabs button.on { background: var(--parch); color: var(--ink); border-bottom-color: transparent; }
.pz-foot { background: var(--parch2); border-top: 1px solid var(--parch-line); }
.pzbox { background: #fbf3dc; border-color: var(--parch-line); }
.pzbox h4 { font-family: var(--title); color: var(--ink); }
.btn.wood { color: #fff1d2; background: linear-gradient(180deg, #6d5d47, #463c2f); border-color: #2b241c; }
.resrow { display: inline-flex; flex-wrap: wrap; gap: 6px; vertical-align: middle; }

/* run purse (top left) and worn gear (in the banner) */
.purse { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px 0 6px; border-radius: 12px; background: linear-gradient(180deg, rgba(74,63,48,.95), rgba(43,36,28,.95)); border: 1px solid #c79a4c; color: #fff1d2; font: 800 15px var(--body); box-shadow: 0 3px 10px rgba(0,0,0,.4); }
.purse span { display: inline-flex; align-items: center; gap: 6px; }
.purse .pk b { font-size: 18px; color: #ffd76a; min-width: 30px; }
.purse .pk i.kama { width: 28px; height: 28px; }
.purse .pr, .purse .pd { color: #f3e2bd; font-size: 14px; }
.purse b.pop { animation: purpop .35s ease-out; }
@keyframes purpop { 0% { transform: scale(1.5); color: #fff; } 100% { transform: scale(1); } }
.bn-gear { display: grid; grid-template-columns: repeat(4, 26px); grid-template-rows: repeat(2, 26px); gap: 3px; margin-left: 4px; padding-left: 8px; border-left: 1px solid rgba(93,81,64,.35); cursor: pointer; }
.bn-gear .g { width: 26px; height: 26px; border-radius: 6px; border: 1px dashed rgba(93,81,64,.45); background: rgba(255,255,255,.25) center/contain no-repeat; display: flex; align-items: center; justify-content: center; font: 700 8px var(--body); color: rgba(93,81,64,.6); overflow: hidden; }
.bn-gear .g .ico { margin: 0 !important; border-width: 1px !important; }
.bn-gear .g.on { border-style: solid; background: #fff8e4; }
@media (max-width: 900px) { .bn-gear { display: none; } }
.dofus.no .dico { filter: grayscale(.2) brightness(.92); opacity: .85; } .dofus .dico { filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); }

/* Dofus Retro interface icons (loader.swf symbols baked by tools/bake-ui-icons.cjs) */
.di { --s: 22px; display: inline-block; flex: none; width: var(--s); height: var(--s); vertical-align: middle; background: url(../assets/ui/dui.png) no-repeat; background-size: calc(var(--s) * 8) calc(var(--s) * 4); }
.di-job { background-position: calc(var(--s) * -0) calc(var(--s) * -0); }
.di-inv { background-position: calc(var(--s) * -1) calc(var(--s) * -0); }
.di-stats { background-position: calc(var(--s) * -2) calc(var(--s) * -0); }
.di-spell { background-position: calc(var(--s) * -3) calc(var(--s) * -0); }
.di-book { background-position: calc(var(--s) * -4) calc(var(--s) * -0); }
.di-guild { background-position: calc(var(--s) * -5) calc(var(--s) * -0); }
.di-mount { background-position: calc(var(--s) * -6) calc(var(--s) * -0); }
.di-friends { background-position: calc(var(--s) * -7) calc(var(--s) * -0); }
.di-map { background-position: calc(var(--s) * -0) calc(var(--s) * -1); }
.di-ach { background-position: calc(var(--s) * -1) calc(var(--s) * -1); }
.di-title { background-position: calc(var(--s) * -2) calc(var(--s) * -1); }
.di-shop { background-position: calc(var(--s) * -3) calc(var(--s) * -1); }
.di-pvp { background-position: calc(var(--s) * -4) calc(var(--s) * -1); }
.di-event { background-position: calc(var(--s) * -5) calc(var(--s) * -1); }
.di-more { background-position: calc(var(--s) * -6) calc(var(--s) * -1); }
.di-kama { background-position: calc(var(--s) * -7) calc(var(--s) * -1); }
.di-star { background-position: calc(var(--s) * -0) calc(var(--s) * -2); }
.di-heart { background-position: calc(var(--s) * -1) calc(var(--s) * -2); }
.di-help { background-position: calc(var(--s) * -2) calc(var(--s) * -2); }
.di-qmark { background-position: calc(var(--s) * -3) calc(var(--s) * -2); }
.di-options { background-position: calc(var(--s) * -4) calc(var(--s) * -2); }
.di-cross { background-position: calc(var(--s) * -5) calc(var(--s) * -2); }
.di-sword { background-position: calc(var(--s) * -6) calc(var(--s) * -2); }
.di-gift { background-position: calc(var(--s) * -7) calc(var(--s) * -2); }
.di-chal { background-position: calc(var(--s) * -0) calc(var(--s) * -3); }
.di-house { background-position: calc(var(--s) * -1) calc(var(--s) * -3); }
.di-locate { background-position: calc(var(--s) * -2) calc(var(--s) * -3); }
.di-xplock { background-position: calc(var(--s) * -3) calc(var(--s) * -3); }
.di-forbidden { background-position: calc(var(--s) * -4) calc(var(--s) * -3); }
.di-dofus { background: url(../assets/ui/dofus.png) 0 0 / calc(var(--s) * 6) calc(var(--s) * 2) no-repeat; }
.vnav .di, .home-nav .di { --s: 26px; } .btn .di { margin-right: 4px; } .pz-tabs .di { --s: 18px; margin-right: 4px; } .btn.round .di { --s: 24px; } .purse .di { --s: 20px; } h4 .di { --s: 20px; margin-right: 4px; }
.side-col .di { --s: 30px; } .home-nav .btn .di { --s: 22px; }
.emb2 { position: relative; display: inline-block; flex: none; vertical-align: middle; filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); } .emb2 > i { position: absolute; left: 0; top: 0; } .gpick:has(button.sym) { max-height: 150px; overflow-y: auto; }
/* the village shows through the home screen: clicks on the ground reach the map (walk, harvest, talk) */
#scr-home { pointer-events: none; }
#scr-home > * { pointer-events: auto; }
#scr-home > .home-logo, #scr-home > .hub-prompt, #scr-home > .hub-feed, #scr-home > .foot { pointer-events: none; }

/* Ecaflip's wheel of fortune */
.rwin { width: min(940px, 96vw); }
.rbody { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; justify-content: center; }
.rwheel { position: relative; width: 400px; height: 400px; flex: none; max-width: 86vw; max-height: 86vw; }
.rwheel canvas { width: 100%; height: 100%; display: block; filter: drop-shadow(0 6px 12px rgba(0,0,0,.35)); }
.rptr { position: absolute; left: 50%; top: -6px; transform: translateX(-50%); width: 0; height: 0; border-left: 16px solid transparent; border-right: 16px solid transparent; border-top: 34px solid #c0392b; z-index: 2; filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
.rhub { position: absolute; left: 50%; top: 50%; width: 74px; height: 74px; margin: -37px 0 0 -37px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff3c4, #c9951f); border: 4px solid #6b4a1d; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 8px rgba(0,0,0,.4); }
.rside { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 10px; }
.rres { min-height: 120px; padding: 12px; border-radius: 12px; background: #f7f0da; border: 1px solid var(--parch-line); display: flex; align-items: center; }
.rprize { display: flex; gap: 14px; align-items: center; animation: rpop .45s ease-out; }
.rprize .ri { display: flex; gap: 4px; flex-wrap: wrap; max-width: 190px; }
.rprize small { display: block; font: 800 11px var(--body); letter-spacing: 2px; color: var(--orange2); }
.rprize b { display: block; font: 700 22px var(--title, Georgia); color: #3b2208; }
@keyframes rpop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.06); } 100% { transform: scale(1); opacity: 1; } }
#r-spin .kama { width: 20px; height: 20px; vertical-align: -4px; }
.rlog { display: flex; flex-direction: column; gap: 3px; max-height: 160px; overflow-y: auto; font-size: 12px; }
.rlog .rl { padding: 3px 8px; border-radius: 6px; background: rgba(255,255,255,.45); }
.rlog .rl.item, .rlog .rl.pet, .rlog .rl.dinde { color: #6b2fb8; font-weight: 700; }

/* merchant pointer at the screen edge */
.mer-arrow { position: fixed; z-index: 5; width: 46px; height: 46px; margin: -23px 0 0 -23px; pointer-events: none; animation: merb 1s ease-in-out infinite; }
.mer-arrow i { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, #fff3c4, #f2c94c 60%, #a8741a); border: 3px solid #3b2208; box-shadow: 0 0 14px #f2c94c; }
.mer-arrow i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 0; height: 0; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 16px solid #3b2208; transform: translate(-50%, -50%) rotate(var(--a)) translateX(26px); transform-origin: 0 50%; }
.mer-arrow .di { --s: 26px; position: absolute; left: 10px; top: 10px; }
@keyframes merb { 50% { transform: scale(1.12); } }

/* item window (sell / equip / break) */
.itemov { background: rgba(10,8,5,.35); }
.itemwin { width: min(520px, 94vw); }
.itemwin .ihead { display: flex; gap: 12px; align-items: flex-start; }
.itemwin .ihead b { font: 700 18px var(--title, Georgia); display: block; }
.itemwin .ihead small { color: #7a6a4a; }
.ilines { margin-top: 6px; display: grid; gap: 2px; }
.iline { display: flex; gap: 8px; align-items: baseline; font-size: 13px; }
.iline span { flex: 1; } .iline b { color: #2e7d32; } .iline small { font-weight: 800; min-width: 52px; text-align: right; }
.iline.up small { color: #2e9a3c; } .iline.down small { color: #c0392b; } .iline.lost b { color: #999; }
.iadv { margin: 10px 0 6px; padding: 6px 10px; border-radius: 8px; font: 700 12px var(--body); }
.iadv.good { background: #e3f4d8; color: #2e7d32; border: 1px solid #9fd38a; } .iadv.bad { background: #fff0d9; color: #a25b00; border: 1px solid #f0c27a; }
.iold { padding: 8px; border-radius: 10px; background: rgba(255,255,255,.4); border: 1px dashed var(--parch-line); }
.iold small { font: 800 10px var(--body); letter-spacing: 1.5px; color: #8b5d00; }
.iruns { margin-top: 8px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ipref { margin-top: 10px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ipref button { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--parch-line); background: #fff8e4; font: 700 11px var(--body); cursor: pointer; }
.ipref button.on { background: #f3d9b0; border-color: var(--orange); color: #8a3c00; }
.rune { position: relative; display: inline-block; flex: none; vertical-align: middle; }
.rune b { position: absolute; right: -4px; bottom: -4px; font: 800 10px var(--body); background: #3b2208; color: #fff; border-radius: 8px; padding: 0 4px; }
#iw-sell .kama { width: 18px; height: 18px; vertical-align: -3px; }

/* village forgemagic */
.fgcols { display: grid; grid-template-columns: 300px 1fr; gap: 16px; }
@media (max-width: 760px) { .fgcols { grid-template-columns: 1fr; } }
.fgrunes { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.fgr { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px; border-radius: 8px; background: rgba(255,255,255,.4); }
.fgr small { font-size: 9px; text-align: center; line-height: 1.1; }
.fglist { display: flex; flex-direction: column; gap: 4px; max-height: 330px; overflow-y: auto; }
.fgp { display: flex; gap: 8px; align-items: center; text-align: left; padding: 4px 6px; border-radius: 8px; border: 1px solid var(--parch-line); background: #fff8e4; cursor: pointer; }
.fgp.on { border: 2px solid var(--orange); background: #fff1d6; }
.fgp span { display: flex; flex-direction: column; } .fgp small { color: #7a6a4a; font-size: 11px; }
.fghead { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; } .fghead b { display: block; font: 700 18px var(--title, Georgia); } .fghead small { color: #7a6a4a; }
.fglines { display: flex; flex-direction: column; gap: 6px; }
.fgline { display: grid; grid-template-columns: 1fr 64px 90px 70px 30px 120px; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 8px; background: rgba(255,255,255,.45); font-size: 13px; }
.fgline b { color: #2e7d32; text-align: right; } .fgline small { color: #8b7a55; font-size: 11px; }
.fgbar { height: 6px; border-radius: 4px; background: #e3d6b2; overflow: hidden; } .fgbar i { display: block; height: 100%; background: linear-gradient(90deg, #f2c94c, #d9631b); }
.fgres { margin-top: 10px; padding: 8px 10px; border-radius: 8px; font: 700 13px var(--body); animation: rpop .35s ease-out; }
.fgres.good { background: #e3f4d8; color: #2e7d32; } .fgres.bad { background: #fde4e0; color: #a2321f; }

.itemwin { width: min(760px, 96vw); }
.icmp { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: stretch; }
@media (max-width: 640px) { .icmp { grid-template-columns: 1fr; } }
.icmpr { display: flex; flex-direction: column; gap: 8px; }
.icol { padding: 10px; border-radius: 10px; background: rgba(255,255,255,.5); border: 1px solid var(--parch-line); }
.icol.new { border: 2px solid var(--orange); background: #fffaf0; }
.icol.old { border-style: dashed; } .icol.keep { opacity: .75; }
.icol > small { display: block; font: 800 10px var(--body); letter-spacing: 1.5px; color: #8b5d00; margin-bottom: 6px; }
.icol .ihead b { font-size: 16px; }
.iempty { padding: 18px 8px; text-align: center; color: #8b7a55; font-style: italic; }
.ival { margin-top: 6px; font-size: 11px; color: #8b7a55; }

/* Dofus Ocre quest: archimonsters counter (run HUD, tracker, quests window) */
.purse .pa { gap: 4px; padding-left: 10px; border-left: 1px solid rgba(199,154,76,.5); cursor: help; }
.purse .pa b { color: #f0b54a; } .purse .pa small { color: #cdb98d; font-size: 12px; }
.purse .pa.flash { animation: paflash 1.2s ease-out; } @keyframes paflash { 0% { transform: scale(1.35); filter: brightness(1.8); } 100% { transform: none; filter: none; } }
.qocre { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: linear-gradient(180deg, #f6e7c4, #ead3a1); border: 1px solid #c79a4c; }
.qocre .qo-h { display: flex; align-items: center; gap: 12px; } .qocre .qo-h h3 { margin: 0; } .qocre .qo-h .grow small { display: block; color: #6b4a1d; }
.qozones { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-top: 10px; }
.qoz { background: rgba(255,255,255,.45); border-radius: 8px; padding: 6px 8px; } .qoz b { font: 700 13px var(--title); color: #5a3a12; display: flex; justify-content: space-between; }
.qoz ul { list-style: none; margin: 4px 0 0; padding: 0; font-size: 12px; columns: 1; } .qoz li { color: #8c7a5a; padding: 1px 0; } .qoz li.ok { color: #2f6b1f; font-weight: 700; } .qoz li.ok::before { content: '✓ '; } .qoz li:not(.ok)::before { content: '· '; }
.qtrack .qt-ocre { margin-top: 6px; padding-top: 5px; border-top: 1px solid rgba(199,154,76,.4); font-size: 12px; display: flex; align-items: center; gap: 5px; }

/* mode choice: four compact cards (2 × 2), portrait on the left, text and footer aligned on the same baseline */
.modes { inset: auto; top: 50%; left: 50%; transform: translate(-50%, -46%); width: min(1040px, 94vw); display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.mode-card { flex-direction: row; height: 196px; flex: none; }
.mode-card:hover { transform: translateY(-3px); }
.mode-card .art { flex: 0 0 172px; min-height: 0; place-items: end center; border-right: 2px solid #8d6a2e; }
.mode-card .art img { max-width: 94%; max-height: 92%; }
.mode-card .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: left; padding: 14px 44px 14px 18px; border-top: 0; background: linear-gradient(180deg, #4a3f30, #2b241c); }
.mode-card h3 { font-size: 23px; margin: 0; line-height: 1.1; }
.mode-card p { flex: 1; min-height: 0; margin: 6px 0 8px; font-size: 13.5px; line-height: 1.35; overflow: hidden; }
.mode-card .mfoot { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.mode-card .tag { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 4px 12px; }
.mode-card .mrec { font: 700 12.5px var(--body); color: #d8c9a2; } .mode-card .mrec b { color: #ffe39a; }
.mode-card .go { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 900 20px/1 var(--body); font-style: normal; color: #2b241c; background: var(--gold); opacity: .7; transition: opacity .15s, transform .15s; }
.mode-card:hover .go { opacity: 1; transform: translateY(-50%) translateX(3px); }
.mode-card .ribbon { top: 10px; right: auto; left: -34px; transform: rotate(-35deg); }
@media (max-width: 860px) { .modes { grid-template-columns: 1fr; top: 60px; transform: translateX(-50%); bottom: 20px; overflow: auto; } .mode-card { height: 160px; } .mode-card .art { flex-basis: 120px; } }

/* achievements book: leather cover, two parchment pages and a spine */
#abook { display: grid; place-items: center; }
#abook.hidden { display: none; }
.abook { position: relative; width: min(1120px, 96vw); height: min(720px, 92vh); display: grid; grid-template-columns: 38% 26px 1fr; padding: 16px; border-radius: 16px; background: radial-gradient(ellipse at 30% 20%, #7a4b22, #4a2a10 70%); border: 3px solid #2a1606; box-shadow: 0 30px 70px rgba(0,0,0,.7), inset 0 0 0 2px #b8863a, inset 0 0 40px rgba(0,0,0,.5); }
.abook > .close { position: absolute; top: -14px; right: -14px; z-index: 3; width: 34px; height: 34px; border-radius: 50%; background: #4a2a10; border: 2px solid #b8863a; color: #ffe39a; display: grid; place-items: center; }
.ab-page { background: linear-gradient(90deg, #f3e3bd, #fbf1d6 40%, #f6e7c3); color: #3b2508; overflow: auto; padding: 20px 22px; box-shadow: inset 0 0 30px rgba(140,100,40,.25); }
.ab-page.l { border-radius: 8px 0 0 8px; background: linear-gradient(90deg, #f6e7c3, #fbf1d6 60%, #ead6a8); }
.ab-page.r { border-radius: 0 8px 8px 0; background: linear-gradient(90deg, #ead6a8, #fbf1d6 40%, #f6e7c3); }
.ab-spine { background: linear-gradient(90deg, #d9bf88, #8a6430 45%, #5a3a14 50%, #8a6430 55%, #d9bf88); box-shadow: 0 0 12px rgba(0,0,0,.4); }
.ab-sum { display: flex; gap: 14px; align-items: center; padding-bottom: 14px; margin-bottom: 10px; border-bottom: 2px solid rgba(160,110,40,.35); }
.ab-sum h3 { margin: 0; font: 800 24px var(--title); color: #5a3208; } .ab-sum small { color: #7a5a2a; font-weight: 700; }
.ab-ring { flex: 0 0 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#d99a26 calc(var(--p) * 1%), rgba(120,80,30,.18) 0); box-shadow: 0 2px 8px rgba(0,0,0,.25); position: relative; }
.ab-ring::before { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: #fbf1d6; box-shadow: inset 0 1px 4px rgba(0,0,0,.2); }
.ab-ring b { position: relative; font: 900 20px var(--title); color: #8a4a08; }
.ab-title { display: flex; align-items: center; gap: 6px; margin-top: 6px; font: 700 12px var(--body); color: #6b4a1d; } .ab-title select { font: 700 12px var(--body); padding: 2px 4px; max-width: 170px; }
.ab-chaps { display: flex; flex-direction: column; gap: 5px; }
.ab-chap { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid transparent; border-radius: 9px; background: rgba(255,255,255,.35); cursor: pointer; text-align: left; color: #3b2508; font: inherit; }
.ab-chap:hover { background: rgba(255,255,255,.7); }
.ab-chap.on { background: linear-gradient(90deg, #fff4cf, #ffe8a8); border-color: #c99a2e; box-shadow: 0 2px 6px rgba(140,90,20,.25); }
.ab-chap > span:first-of-type { flex: 1; min-width: 0; } .ab-chap b { display: block; font: 800 14px var(--title); color: #5a3208; } .ab-chap small { display: block; font-size: 11px; color: #8a6a3a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-chap em { display: block; height: 5px; margin-top: 4px; border-radius: 3px; background: rgba(120,80,30,.2); overflow: hidden; } .ab-chap em i { display: block; height: 100%; background: linear-gradient(90deg, #e0a030, #f5c860); }
.ab-chap.full em i { background: linear-gradient(90deg, #5aa83a, #8fd36a); }
.ab-n { font: 900 16px var(--title); color: #8a4a08; } .ab-n small { font-size: 11px; color: #9a7a4a; }
.ab-ph { position: sticky; top: -20px; z-index: 1; display: flex; align-items: center; gap: 10px; margin: -20px -22px 10px; padding: 14px 22px 10px; background: linear-gradient(180deg, #f8ebc8 80%, rgba(248,235,200,0)); }
.ab-ph h3 { margin: 0; font: 800 22px var(--title); color: #5a3208; } .ab-ph small { color: #7a5a2a; font-weight: 700; }
.ab-f { display: flex; gap: 3px; } .ab-f button { padding: 4px 10px; border-radius: 999px; border: 1px solid #c79a4c; background: rgba(255,255,255,.5); font: 700 12px var(--body); color: #6b4a1d; cursor: pointer; } .ab-f button.on { background: #e08a1e; color: #fff; border-color: #b8650e; }
.ab-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ab-e { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.35); border: 1px solid rgba(160,110,40,.25); }
.ab-e.ok { background: linear-gradient(135deg, #fff7da, #ffeeb8); border-color: #d6a63a; box-shadow: 0 2px 6px rgba(160,110,20,.2); }
.ab-m { position: relative; flex: 0 0 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 35%, #fff3cf, #c9a46a); border: 3px solid #9a8a6a; filter: grayscale(1) opacity(.55); }
.ab-e.ok .ab-m { filter: none; border-color: #d99a26; box-shadow: 0 0 0 2px #fff1bf, 0 0 12px rgba(230,170,40,.6); }
.ab-m img { max-width: 50px; max-height: 50px; object-fit: contain; } .ab-m img.face { width: 56px; height: 56px; max-width: none; max-height: none; object-fit: cover; object-position: top; }
.ab-ck { position: absolute; right: -1px; bottom: -1px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #3e8a2a; color: #fff; font: 900 12px/1 var(--body); font-style: normal; border: 2px solid #fff3cf; }
.ab-e .grow { min-width: 0; } .ab-e b { font: 800 14px var(--title); color: #4a2a06; } .ab-e:not(.ok) b { color: #7a6a4a; }
.ab-e p { margin: 1px 0 3px; font-size: 12px; line-height: 1.3; color: #6b5432; }
.ab-rw { display: flex; flex-wrap: wrap; gap: 4px 8px; font: 700 11px var(--body); } .ab-rw span { color: #2c7a2a; } .ab-rw .tt { color: #8a4bb8; } .ab-rw .dt { color: #9a7a4a; margin-left: auto; }
@media (max-width: 860px) { .abook { grid-template-columns: 1fr; grid-template-rows: auto 0 1fr; height: 94vh; } .ab-spine { display: none; } .ab-page.l { max-height: 38vh; border-radius: 8px 8px 0 0; } .ab-page.r { border-radius: 0 0 8px 8px; } .ab-list { grid-template-columns: 1fr; } }

/* quit dialog */
.qwin { width: min(620px, 96vw); }
.qw-lh { font: 800 12px var(--body); letter-spacing: 1.5px; text-transform: uppercase; color: #8a6a3a; margin-bottom: 6px; }
.qw-cells { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 14px; }
.ql { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 10px; background: linear-gradient(180deg, #fff6d6, #f3e2b4); border: 1px solid #d6a63a; text-align: center; }
.ql b { font: 900 18px var(--title); color: #6b3a06; } .ql small { font-size: 10.5px; color: #7a5a2a; line-height: 1.15; } .ql.off { opacity: .45; filter: grayscale(.6); }
.qw-opts { display: flex; flex-direction: column; gap: 8px; }
.qw-o { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; border-radius: 12px; border: 1px solid #c79a4c; background: #fbf3dc; cursor: pointer; text-align: left; font: inherit; color: #3b2508; transition: transform .1s, box-shadow .1s, background .1s; }
.qw-o:hover { background: #fff8e4; transform: translateX(3px); box-shadow: 0 3px 10px rgba(120,80,20,.2); }
.qw-o .qi { flex: 0 0 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; background: #4a3f30; color: #ffd57a; font: 900 20px var(--body); font-style: normal; --s: 26px; }
.qw-o > span:not(.kbd) { flex: 1; min-width: 0; } .qw-o b { display: block; font: 800 15px var(--title); color: #4a2a06; } .qw-o small { display: block; font-size: 12px; color: #6b5432; line-height: 1.3; }
.qw-o.main { background: linear-gradient(180deg, #ffe7a8, #f5c860); border-color: #c98a1e; } .qw-o.main .qi { background: #e08a1e; color: #fff; }
.qw-o.back { background: transparent; border-style: dashed; }
.qw-o .kbd { flex: none; }
@media (max-width: 560px) { .qw-cells { grid-template-columns: repeat(3, 1fr); } }
#quitwin { z-index: 40; }
/* set-aside windows: tray of icons (level cards, chests, items) under the minimap */
.stash { position: absolute; right: 14px; top: 196px; display: flex; flex-direction: column; gap: 8px; z-index: 5; }
.stb { position: relative; width: 64px; padding: 6px 4px 5px; border-radius: 14px; border: 2px solid #c79a4c; background: linear-gradient(180deg, rgba(74,63,48,.96), rgba(43,36,28,.96)); color: #fff1d2; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 1px; box-shadow: 0 4px 12px rgba(0,0,0,.45); animation: stbin .35s ease-out, stbpulse 2.4s ease-in-out .4s infinite; }
.stb:hover { transform: translateX(-3px); border-color: #ffd57a; }
.stb b { position: absolute; top: -7px; right: -7px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: #e0441e; border: 2px solid #fff1d2; font: 900 12px/18px var(--body); color: #fff; }
.stb small { font: 800 10px var(--body); letter-spacing: .5px; text-transform: uppercase; color: #ffd57a; }
.stb.k-cards { border-color: #6fb3ff; } .stb.k-chest { border-color: #f2c94c; } .stb.k-item { border-color: #b07bff; }
@keyframes stbin { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes stbpulse { 0%, 100% { box-shadow: 0 4px 12px rgba(0,0,0,.45); } 50% { box-shadow: 0 4px 12px rgba(0,0,0,.45), 0 0 16px rgba(255,210,110,.55); } }
.minbtn { margin-left: auto; flex: none; }
.chest-h .minbtn { margin-left: 12px; vertical-align: middle; }
@media (max-width: 760px) { .stash { top: 150px; right: 8px; } .stb { width: 54px; } }

/* ===================================================================== phones and tablets (body.mob, landscape) */
.mob-only { display: none; }
body.mob .mob-only { display: inline-block; }
body.mob #scr-home .home-logo, body.mob #scr-home .rooms-win { display: none; }
body.mob .side-col { display: flex; left: 6px; top: 54px; bottom: 64px; transform: none; overflow-y: auto; gap: 5px; padding: 5px 4px; }
body.mob .side-col button { width: 40px; height: 40px; flex: none; } body.mob .side-col .di { --s: 24px; } body.mob .side-col button span { display: none; }
body.mob .qtrack { left: 58px; top: 54px; width: min(230px, 40vw); padding: 6px 8px; font-size: 11px; }
body.mob .hub-chat { display: none; left: 58px; bottom: 64px; width: min(340px, 55vw); }
body.mob.chat-open .hub-chat { display: block; }
body.mob .hub-feed { left: 58px; bottom: 70px; } body.mob .hub-prompt { bottom: 70px; font-size: 13px; }
body.mob .home-nav { left: auto; right: 8px; bottom: 6px; transform: none; width: auto; flex-wrap: nowrap; gap: 5px; justify-content: flex-end; }
body.mob .home-nav .btn.light { font-size: 0; padding: 7px; } body.mob .home-nav .btn.light .di { margin: 0; --s: 24px; }
body.mob .home-nav .btn.huge { order: 9; flex-basis: auto; font-size: 18px; padding: 10px 26px; }
body.mob .home-nav .again span small { display: none; } body.mob .home-nav .again { padding: 6px 10px; font-size: 13px; }
body.mob .home .foot, body.mob #scr-home .foot { display: none; }
body.mob .topbar .chip small, body.mob #me-sub { display: none; }
/* run HUD */
body.mob .waveplate { min-width: 96px; padding: 2px 10px 4px; } body.mob .waveplate b { font-size: 22px; } body.mob .waveplate .sub { font-size: 10px; }
body.mob .purse { height: 32px; gap: 8px; font-size: 13px; } body.mob .purse .pk b { font-size: 15px; }
body.mob .stash { top: 128px; } body.mob .stb { width: 52px; padding: 4px 2px; } body.mob .stb .di { --s: 24px; }
body.mob .banner { transform: translateX(-50%) scale(.86); transform-origin: 50% 100%; bottom: 2px; }
body.mob .roll { cursor: pointer; } body.mob .roll::after { content: ''; position: absolute; inset: -10px; }
body.mob .statpanel .tab { display: none; }
body.mob .loots { display: none; }
@media (max-height: 420px) { body.mob .banner { transform: translateX(-50%) scale(.74); } body.mob .mm, body.mob #minimap { transform: scale(.8); transform-origin: top right; } }
/* portrait: a card asking to turn the phone */
.rotate { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 24px; background: radial-gradient(ellipse at 50% 40%, #4a3f30, #1b1610); color: #fff1d2; text-align: center; }
.rotate.hidden { display: none; }
.rotate h2 { font: 800 24px var(--title); color: #ffd57a; margin: 18px 0 6px; } .rotate p { margin: 0 0 18px; color: #e8dcc0; }
.rot-ph { width: 64px; height: 108px; margin: 0 auto; border: 4px solid #ffd57a; border-radius: 12px; animation: rotph 2.2s ease-in-out infinite; }
@keyframes rotph { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
body.mob.portrait .banner { transform: translateX(-50%) scale(.55); }
body.mob.portrait .waveplate { top: 46px; }
/* Osatopia account */
.osa-chip { cursor: pointer; border: 1px solid #c79a4c; font: 800 13px var(--body); color: #fff1d2; gap: 6px; } .osa-chip .di { --s: 20px; }
.osa-chip:not(.on) { background: linear-gradient(180deg, #e8952c, #b8650e); color: #fff; } .osa-chip.on #osa-lbl::after { content: ' ✓'; color: #8dff8a; }
.osawin { width: min(440px, 94vw); }
#osa-form { display: flex; flex-direction: column; gap: 10px; } #osa-form label { display: flex; flex-direction: column; gap: 4px; font: 700 13px var(--body); color: #5a3a12; }
#osa-form input { padding: 9px 10px; border-radius: 8px; border: 1px solid #c79a4c; background: #fffaf0; font: 15px var(--body); }
#osa-form .btn { align-self: stretch; justify-content: center; } #osa-form .hidden { display: none; }
.osa-msg { padding: 8px 10px; border-radius: 8px; background: #e6f3dc; color: #2f6b1f; font-size: 13px; } .osa-msg.bad { background: #fbe1d9; color: #9b2c12; }
.osa-ok { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; } .osa-ok b { font: 800 20px var(--title); color: #5a3208; display: block; } .osa-ok small { color: #6b5432; }
.osa-acts { display: flex; justify-content: flex-end; }
body.mob .osa-chip #osa-lbl { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* JOUER gate: sign in, create an account, or play as a guest */
.gatewin { width: min(560px, 96vw); } .gatewin .win-b { display: flex; flex-direction: column; gap: 8px; }
.gate-o { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 14px; border-radius: 12px; border: 1px solid #c79a4c; background: #fbf3dc; cursor: pointer; text-align: left; font: inherit; color: #3b2508; }
.gate-o:hover { background: #fff8e4; transform: translateX(3px); }
.gate-o .gi { flex: 0 0 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: #4a3f30; --s: 28px; }
.gate-o b { display: block; font: 800 16px var(--title); color: #4a2a06; } .gate-o small { display: block; font-size: 12px; color: #6b5432; line-height: 1.35; }
.gate-o.main { background: linear-gradient(180deg, #ffe7a8, #f5c860); border-color: #c98a1e; } .gate-o.main .gi { background: #e08a1e; }
.gate-o.guest { background: transparent; border-style: dashed; }
body.mob .gate-o small { font-size: 11px; }

/* the game canvas always covers the screen (its buffer is re-fitted after rotations) */
#view canvas { width: 100% !important; height: 100% !important; }

/* ===================================================== phones (landscape): windows as framed panels over the game */
body.mob .overlay { padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)); background: rgba(10,8,5,.62); }
body.mob .overlay > .win { max-height: calc(100dvh - 16px) !important; border-radius: 14px; box-shadow: 0 14px 40px rgba(0,0,0,.6), 0 0 0 1px #2b241c, inset 0 0 0 2px #c8b88e; }
/* small windows: a card sized to its content */
body.mob .overlay > .win.modal { width: min(520px, calc(100vw - 32px)) !important; height: auto !important; }
body.mob #osawin > .win { width: min(400px, calc(100vw - 32px)) !important; }
body.mob #gatewin > .win, body.mob #quitwin > .win { width: min(560px, calc(100vw - 32px)) !important; }
body.mob #itemwin > .win, body.mob #shopwin > .win, body.mob #options > .win, body.mob #help > .win { width: min(680px, calc(100vw - 32px)) !important; }
/* large windows: a big panel, the game still around it */
body.mob #vwin > .win, body.mob #profile > .win, body.mob #equipwin > .win, body.mob #rwin > .win, body.mob #scr-results .win { width: calc(100vw - 56px) !important; max-width: 920px !important; height: auto !important; max-height: calc(100dvh - 20px) !important; }
body.mob #cards > .win { width: min(760px, calc(100vw - 32px)) !important; height: auto !important; }
body.mob .pausebox { inset: 10px max(16px, env(safe-area-inset-left)); border-radius: 16px; }
body.mob .win-h { padding: 7px 12px; gap: 8px; } body.mob .win-h h2 { font-size: 17px; } body.mob .win-h small { font-size: 11px; }
body.mob .win-b { padding: 10px 12px; -webkit-overflow-scrolling: touch; }
body.mob .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } body.mob .tabs::-webkit-scrollbar { display: none; }
body.mob .tabs button { flex: none; padding: 5px 9px; font-size: 11px; }
body.mob .win-h .close, body.mob .close { width: 34px; height: 34px; }
/* flow: modes 2 × 2 filling the screen, characters as a compact strip, details below */
body.mob .flow-top { top: 4px; } body.mob .flow-top .btn.back { padding: 5px 10px; font-size: 12px; } body.mob .stepper { transform: scale(.85); transform-origin: left center; }
body.mob .modes { position: absolute; top: 50px; bottom: 8px; left: 8px; right: 8px; width: auto; transform: none; grid-template-columns: 1fr 1fr; gap: 8px; overflow: auto; }
body.mob .mode-card { height: auto; min-height: 120px; } body.mob .mode-card .art { flex-basis: 96px; }
body.mob .mode-card .txt { padding: 8px 34px 8px 10px; } body.mob .mode-card h3 { font-size: 17px; } body.mob .mode-card p { font-size: 11.5px; margin: 3px 0 5px; }
body.mob .mode-card .tag { font-size: 10.5px; padding: 3px 8px; } body.mob .mode-card .mrec { font-size: 11px; } body.mob .mode-card .go { right: 8px; width: 22px; height: 22px; font-size: 16px; }
body.mob .cls-strip { top: 46px; left: 8px; right: 8px; gap: 5px; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding: 6px 2px; scrollbar-width: none; }
body.mob .cls-card { width: 52px; min-width: 52px; flex: none; } body.mob .cls-card span { font-size: 9px; } body.mob .cls-card.sel { transform: translateY(-2px) scale(1.04); }
body.mob .cls-detail { top: 146px; bottom: 6px; left: 8px; right: 8px; padding: 10px 12px; display: block; overflow: auto; } body.mob .cls-detail .stage { display: none; }
body.mob .cls-detail h3 { font-size: 20px; }
body.mob .zone-title h2 { font-size: 26px; } body.mob .zone-arrow { transform: scale(.75); }
/* equipment: smaller paper doll next to the bag */
body.mob .eq-grid { grid-template-columns: 216px 1fr; gap: 10px; } body.mob .doll { zoom: .62; } body.mob .bag { max-height: none; }
/* level cards: three in a row */
body.mob .lvl-body { padding: 8px; gap: 8px; } body.mob .card-list { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
body.mob .card-list .card { zoom: .74; } body.mob .lvlbadge, body.mob #cards-lv { transform: scale(.8); }
/* chest, item, merchant, quit */
body.mob .chestbox { zoom: .8; } body.mob .icmp { gap: 8px; } body.mob .qw-cells { grid-template-columns: repeat(5, 1fr); }
/* achievements book in two pages */
body.mob .abook { width: calc(100vw - 32px); height: calc(100dvh - 16px); border-radius: 14px; padding: 8px; grid-template-columns: 34% 8px 1fr; grid-template-rows: none; }
body.mob .ab-spine { display: block; } body.mob .ab-page.l { max-height: none; border-radius: 6px 0 0 6px; padding: 10px; } body.mob .ab-page.r { border-radius: 0 6px 6px 0; padding: 10px; }
body.mob .ab-sum { gap: 8px; padding-bottom: 8px; } body.mob .ab-ring { flex-basis: 56px; height: 56px; } body.mob .ab-ring b { font-size: 14px; } body.mob .ab-sum h3 { font-size: 16px; }
body.mob .ab-chap { padding: 5px 7px; gap: 6px; } body.mob .ab-chap small { display: none; } body.mob .ab-list { grid-template-columns: 1fr; }
body.mob .ab-ph { margin: -10px -10px 8px; padding: 8px 10px; top: -10px; } body.mob .abook > .close { top: 4px; right: 4px; }
/* roulette: wheel and panel side by side */
body.mob .rwheel { width: calc(100dvh - 110px); height: calc(100dvh - 110px); }
/* results */
body.mob .res-sum .s b { font-size: 20px; } body.mob .res-table { font-size: 11px; }
body.mob .team-win { top: 50px; bottom: auto; left: 50%; right: auto; width: min(680px, calc(100vw - 32px)); transform: translateX(-50%); max-height: calc(100dvh - 60px); }
body.mob .pz-top { padding: 4px 10px; } body.mob .pz-title h2 { font-size: 18px; } body.mob .pz-vol { display: none; }
body.mob .pz-tabs button { padding: 5px 8px; font-size: 11px; } body.mob .pz-body { padding: 6px 8px; }
body.mob .pz-cols { grid-template-columns: 1fr 1fr; height: auto; } body.mob .pz-foot { padding: 5px 10px; } body.mob .pz-foot .btn { padding: 6px 12px; font-size: 13px; }
body.mob .chest-list { grid-template-columns: repeat(3, 1fr); } body.mob .ctile { flex-direction: column; text-align: center; }
.win > .tabs, .win > .win-h, .win > .win-f { flex: none; } .win > .win-b { min-height: 0; }