/* 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 { --z: 1;
  --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?v=2); 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; overflow: hidden; background: radial-gradient(ellipse 70% 55% at 50% 42%, #5a2410 0%, #2a120a 38%, #0b0605 75%); transition: opacity .5s; }
/* loading key art (04/11) */
.ld-art { position: absolute; inset: 0; pointer-events: none; }
.ld-rays { position: absolute; left: 50%; top: 40%; width: calc(220vmax / var(--z)); height: calc(220vmax / var(--z)); margin: calc(-110vmax / var(--z)) 0 0 calc(-110vmax / var(--z)); opacity: .22;
  background: repeating-conic-gradient(from 0deg, rgba(255,170,70,.55) 0deg 3deg, transparent 3deg 14deg);
  -webkit-mask: radial-gradient(circle, #000 0, rgba(0,0,0,.6) 18%, transparent 46%); mask: radial-gradient(circle, #000 0, rgba(0,0,0,.6) 18%, transparent 46%);
  animation: ldSpin 90s linear infinite; }
.ld-boss { position: absolute; right: calc(6vw / var(--z)); top: calc(4vh / var(--z)); height: calc(58vh / var(--z)); opacity: .38; filter: brightness(.45) saturate(1.4) drop-shadow(0 0 40px rgba(255,60,20,.55)); animation: ldFloat 9s ease-in-out infinite; transform-origin: 50% 80%; }
.ld-art { overflow: hidden; }
.ld-horde { position: absolute; left: 0; right: 0; }
.ld-strip { display: flex; width: max-content; align-items: flex-end; animation: ldMarch 60s linear infinite; }
.ld-strip img { flex: none; margin: 0 calc(-1.2vw / var(--z)); animation: ldBob 1.1s ease-in-out infinite; animation-delay: var(--d); }
.ld-far { bottom: calc(15vh / var(--z)); height: calc(22vh / var(--z)); opacity: .75; }
.ld-far .ld-strip { animation-duration: 95s; }
.ld-far img { height: calc(16vh / var(--z)); filter: brightness(0) drop-shadow(0 0 5px rgba(255,110,40,.75)); }
.ld-near { bottom: calc(-2vh / var(--z)); height: calc(30vh / var(--z)); }
.ld-near .ld-strip { animation-duration: 55s; animation-direction: reverse; }
.ld-near img { height: calc(26vh / var(--z)); filter: brightness(.12) saturate(.6) drop-shadow(0 -2px 0 rgba(255,150,60,.9)) drop-shadow(0 0 14px rgba(255,80,20,.6)); }
.ld-heroes .ld-hero { position: absolute; bottom: calc(3vh / var(--z)); height: calc(74vh / var(--z)); max-width: calc(27vw / var(--z)); object-fit: contain; filter: drop-shadow(0 0 2px #ffd57a) drop-shadow(0 0 30px rgba(255,120,30,.65)); animation: ldIn 1s cubic-bezier(.2,.9,.3,1.2) both, ldFloat 6s ease-in-out 1s infinite; }
.ld-hero.l { left: calc(5vw / var(--z)); }
.ld-hero.r { right: calc(5vw / var(--z)); transform: scaleX(-1); animation-name: ldInR, ldFloatR; animation-delay: .15s, 1.15s; }
.ld-fog { position: absolute; inset: auto 0 0 0; height: calc(34vh / var(--z)); background: linear-gradient(to top, #070403 14%, rgba(7,4,3,.75) 45%, transparent); }
.ld-embers i { position: absolute; bottom: -10px; width: var(--s); height: var(--s); border-radius: 50%; background: #ffb347; box-shadow: 0 0 8px 2px rgba(255,120,30,.9);
  animation: ldEmber var(--t) linear infinite; animation-delay: var(--w); opacity: 0; }
.loading .in { position: relative; z-index: 2; width: min(760px, calc(94vw / var(--z))) !important; margin-top: calc(-8vh / var(--z)); }
.loading .in .bar, .loading .in #load-tip { width: min(440px, calc(86vw / var(--z))); margin-left: auto; margin-right: auto; }
.loading .logo-word:first-child { font-size: clamp(18px, calc(2.6vw / var(--z)), 30px) !important; letter-spacing: .45em !important; }
.loading .logo-word + .logo-word { font-size: clamp(64px, calc(9vw / var(--z)), 132px) !important; line-height: 1.05; margin-bottom: 8px !important; white-space: nowrap; padding: 0 .08em; }
.ld-tag { font: 800 clamp(11px, calc(1.1vw / var(--z)), 14px) var(--body); letter-spacing: .2em; white-space: nowrap; text-transform: uppercase; color: #ffb36b; margin: 0 0 22px; text-shadow: 0 0 12px rgba(255,110,30,.7), 0 1px 2px #000; }
.ld-tag b { color: #fff1cf; font-weight: 800; }
.loading .logo-word { text-shadow: 0 2px 0 #5a3b1d, 0 0 24px rgba(255,140,40,.55), 0 0 60px rgba(255,90,20,.35); }
.loading .logo-word + .logo-word { background: linear-gradient(100deg, #ffd57a 0%, #ffd57a 40%, #fff6d6 50%, #ffd57a 60%, #ffd57a 100%); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: ldShine 3.5s ease-in-out infinite, ldPulse 2.4s ease-in-out infinite; text-shadow: none; filter: drop-shadow(0 3px 0 #5a3b1d) drop-shadow(0 0 22px rgba(255,140,40,.6)); }
.loading .bar { box-shadow: 0 0 22px rgba(255,120,30,.35); }
#load-tip { text-shadow: 0 1px 3px #000; }
@keyframes ldSpin { to { transform: rotate(360deg); } }
@keyframes ldMarch { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes ldBob { 50% { transform: translateY(-6%); } }
@keyframes ldFloat { 50% { transform: translateY(calc(-1.6vh / var(--z))); } }
@keyframes ldFloatR { from, to { transform: scaleX(-1) translateY(0); } 50% { transform: scaleX(-1) translateY(calc(-1.6vh / var(--z))); } }
@keyframes ldIn { from { opacity: 0; transform: translateX(calc(-8vw / var(--z))); } to { opacity: 1; transform: none; } }
@keyframes ldInR { from { opacity: 0; transform: scaleX(-1) translateX(calc(-8vw / var(--z))); } to { opacity: 1; transform: scaleX(-1); } }
@keyframes ldEmber { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } 80% { opacity: .8; } 100% { transform: translate(var(--x), calc(-95vh / var(--z))); opacity: 0; } }
@keyframes ldShine { 0%, 30% { background-position: 120% 0; } 70%, 100% { background-position: -20% 0; } }
@keyframes ldPulse { 50% { filter: drop-shadow(0 3px 0 #5a3b1d) drop-shadow(0 0 34px rgba(255,160,50,.85)); } }
@media (max-aspect-ratio: 1/1) { .loading .in { margin-top: calc(-22vh / var(--z)); } .ld-heroes .ld-hero { height: calc(38vh / var(--z)); max-width: calc(50vw / var(--z)); bottom: calc(-3vh / var(--z)); } .ld-tag { font-size: 10px; letter-spacing: .12em; } .ld-hero.l { left: calc(-4vw / var(--z)); } .ld-hero.r { right: calc(-4vw / var(--z)); } .ld-boss { height: calc(36vh / var(--z)); right: calc(-6vw / var(--z)); } .ld-near img { height: calc(18vh / var(--z)); } .ld-far img { height: calc(11vh / var(--z)); } }
@media (prefers-reduced-motion: reduce) { .ld-art *, .ld-art { animation: none !important; } }
.loading.done { opacity: 0; pointer-events: none; }
.loading .in { width: min(440px, calc(86vw / var(--z))); 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; }
#ui > .topbar { pointer-events: none; }   /* #ui > * would make the whole bar catch the clicks (it covered the Back button of the play flow) */
.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: calc(50vh / var(--z)); }
.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 calc(3vw / var(--z)) 70px; display: flex; gap: calc(2vw / var(--z)); 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: calc(3vw / var(--z)); right: calc(3vw / var(--z)); top: 20px; display: flex; gap: 8px; justify-content: center; }
.cls-card { position: relative; width: calc(7.2vw / var(--z)); 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: calc(3vw / var(--z)); right: calc(3vw / var(--z)); bottom: 22px; top: calc(20px + min(173px, calc(12vw / var(--z))) + 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, calc(94vw / var(--z))); max-height: calc(100% - 24px); }
.team-win .win-b { min-height: 0; }   /* a long room (invitations, chat) scrolls inside the window: the buttons stay reachable */
.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, calc(72vw / var(--z))); 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; }
#ui > .boss-intro, #ui > .boss-intro * { pointer-events: none !important; }   /* never in the way of a click to move */
.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(1200px, calc(98vw / var(--z))); max-height: calc(96vh / var(--z)); }
.lvl-body { display: grid; grid-template-columns: 1fr 250px; gap: 14px; padding: 16px; overflow: auto; }
.card-list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 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, calc(94vw / var(--z))); max-height: calc(90vh / var(--z)); }
.modal.wide { width: min(980px, calc(96vw / var(--z))); height: min(720px, calc(92vh / var(--z))); }
.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; }
.spellbar.two { flex-direction: column; align-items: flex-end; gap: 6px; } .spellbar .sbrow { display: flex; gap: 8px; align-items: center; }
.bn-right.two { height: auto; min-height: 72px; align-items: flex-end; }
.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?v=6); 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; }
#eq-doll { position: sticky; top: 0; align-self: start; }
.eq-grid > .eq-left { position: sticky; top: 0; align-self: start; max-height: calc(calc(100vh / var(--z)) - 190px); overflow: auto; }   /* the worn equipment stays in sight */
.gfilt { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 6px; } .gfilt .chip { font: 12px var(--body); padding: 2px 9px; border-radius: 999px; border: 1px solid #b89a63; background: rgba(255,255,255,.35); cursor: pointer; } .gfilt .chip.on { background: #c79a4c; color: #2b241c; border-color: #8a6a2e; }
.gcmp { font: 700 11px var(--body); padding: 1px 6px; border-radius: 6px; background: rgba(0,0,0,.08); color: #6b5a3d; white-space: nowrap; } .gcmp.up { background: #2f8a3a; color: #fff; } .gcmp.down { background: #a8402e; color: #fff; } .gcmp.new { background: #2f6ab8; color: #fff; }
.gdiff { font-size: 11.5px; margin-top: 2px; } .gdiff .gdp { color: #2b8a3a; font-weight: 700; margin-right: 6px; display: inline; font-size: inherit; } .gdiff .gdm { color: #b23a2a; font-weight: 700; margin-right: 6px; display: inline; font-size: inherit; }
.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: 50px; } .s-cape { left: 246px; top: 50px; }
.s-ring1 { left: 20px; top: 130px; } .s-ring2 { left: 246px; top: 130px; } .s-belt { left: 20px; top: 210px; } .s-shield { left: 246px; top: 210px; } .s-boots { left: 133px; top: 300px; }
.s-weapon { left: 20px; top: 295px; }
.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: calc(92vw / var(--z)); right: calc(4vw / var(--z)); 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: calc(92vw / var(--z)); } .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: calc(94vw / var(--z)); } .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: calc(96vw / var(--z)); }
  .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 calc(4vw / var(--z)) 20px; overflow: auto; } .mode-card .art { min-height: 120px; }
  .cls-strip { flex-wrap: wrap; } .cls-card { width: calc(15vw / var(--z)); }
  .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; }
}

/* ---------------------------------------------------------------- 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?v=5); 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: calc(52vh / var(--z)); 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: calc(60vw / var(--z)); 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: calc(60vw / var(--z)); 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, calc(94vw / var(--z))); 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: calc(3vh / var(--z)) calc(2vw / var(--z)); 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(5, 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?v=2) 0 0 / calc(var(--s) * 6) calc(var(--s) * 3) 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, calc(96vw / var(--z))); }
.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: calc(86vw / var(--z)); max-height: calc(86vw / var(--z)); }
.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; }
/* jackpot of the golden wheel (shared by every player, Osatopia rule) */
.rjp { position: relative; border-radius: 14px; padding: 10px 12px; text-align: center; overflow: hidden;
  background: radial-gradient(circle at 50% 30%, #ffe7a1 0, #f2b84a 40%, #b4651d 85%, #5b2c0c 100%); box-shadow: inset 0 0 0 3px #e8c06a, inset 0 0 0 6px #6b4a1d, 0 4px 14px rgba(0,0,0,.3); }
.rjp small { display: block; font: 800 11px var(--body); letter-spacing: 2px; color: #5b2c0c; }
.rjp b { display: flex; justify-content: center; align-items: center; gap: 6px; font: 800 34px var(--title, Georgia); color: #fff8d8; text-shadow: 0 3px 0 #6b3510, 0 0 14px rgba(255,220,120,.8); }
.rjp .small { color: #3b2208; font-weight: 600; }
.rosa { padding: 8px 10px; border-radius: 10px; background: #e8f6ff; border: 1px solid #8cc8ea; color: #173a52; line-height: 1.35; }
.rosa-acc { margin-top: 5px; } .rosa-acc select { margin-left: 4px; }
.sellbar { display: flex; gap: 8px; align-items: center; position: sticky; top: 0; z-index: 2; padding: 8px 10px; margin: 8px 0; border-radius: 10px; background: rgba(40, 26, 12, .92); border: 1px solid #6b4a1d; }
.sellbar span { font-size: 13px; color: #f3dfb8; }
.srow .sck { display: flex; align-items: center; padding: 0 2px 0 0; cursor: pointer; }
.srow .sck input { width: 18px; height: 18px; accent-color: #e8892b; cursor: pointer; }
.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, calc(94vw / var(--z))); }
.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 56px; 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, calc(96vw / var(--z))); }
.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, calc(94vw / var(--z))); 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, calc(96vw / var(--z))); height: min(720px, calc(92vh / var(--z))); 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: calc(94vh / var(--z)); } .ab-spine { display: none; } .ab-page.l { max-height: calc(38vh / var(--z)); 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, calc(96vw / var(--z))); }
.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, calc(40vw / var(--z))); padding: 6px 8px; font-size: 11px; }
body.mob .hub-chat { display: none; left: 58px; bottom: 64px; width: min(340px, calc(55vw / var(--z))); }
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, calc(94vw / var(--z))); }
#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, calc(96vw / var(--z))); } .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(calc(100dvh / var(--z)) - 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(calc(100vw / var(--z)) - 32px)) !important; height: auto !important; }
body.mob #osawin > .win { width: min(400px, calc(calc(100vw / var(--z)) - 32px)) !important; }
body.mob #gatewin > .win, body.mob #quitwin > .win { width: min(560px, calc(calc(100vw / var(--z)) - 32px)) !important; }
body.mob #itemwin > .win, body.mob #shopwin > .win, body.mob #options > .win, body.mob #help > .win { width: min(680px, calc(calc(100vw / var(--z)) - 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(calc(100vw / var(--z)) - 56px) !important; max-width: 920px !important; height: auto !important; max-height: calc(calc(100dvh / var(--z)) - 20px) !important; }
body.mob #cards > .win { width: min(760px, calc(calc(100vw / var(--z)) - 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 .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 .eq-grid > .eq-left { max-height: none; position: static; } 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 { gap: 6px; }
body.mob .card-list .card { padding: 26px 7px 7px !important; gap: 4px !important; font-size: 11.5px; } 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(calc(100vw / var(--z)) - 32px); height: calc(calc(100dvh / var(--z)) - 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(calc(100dvh / var(--z)) - 110px); height: calc(calc(100dvh / var(--z)) - 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(calc(100vw / var(--z)) - 32px)); transform: translateX(-50%); max-height: calc(calc(100dvh / var(--z)) - 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; }
/* phones: no automatic zoom when a field gets the focus (iOS zooms on text under 16px) */
body.mob input, body.mob select, body.mob textarea { font-size: 16px !important; }

/* ======================= phones: character choice on one screen (classes on the left, the chosen one on the right) */
body.mob #st-class .cls-strip { top: 50px; bottom: auto; left: max(10px, env(safe-area-inset-left)); right: auto; width: calc(45vw / var(--z)); display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: auto; align-content: start; gap: 5px; overflow: visible; padding: 0; }
body.mob #st-class .cls-card { width: auto; min-width: 0; max-width: none; aspect-ratio: 9 / 12; }
body.mob #st-class .cls-card.sel { transform: scale(1.06); }
body.mob #st-class .cls-detail { top: 50px; left: calc(calc(45vw / var(--z)) + 20px); right: max(10px, env(safe-area-inset-right)); bottom: 8px; display: flex; flex-direction: column; gap: 6px; overflow: hidden; padding: 10px 12px; }
body.mob #st-class .cls-detail > div:nth-child(2) { flex: 1; min-height: 0; overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; }
body.mob #st-class .cls-detail h3 { font-size: 19px; gap: 6px; margin: 0; } body.mob #st-class .cls-detail h3 img { width: 24px; height: 24px; }
body.mob #st-class .cls-detail .desc { font-size: 12px; margin: 2px 0 4px; line-height: 1.3; }
body.mob #st-class .xpline { font-size: 12px; } body.mob #st-class .cls-detail .box { display: none !important; }
body.mob #st-class .cls-detail h4 { font-size: 12px !important; margin: 4px 0 3px !important; }
body.mob #st-class .spellgrid { zoom: .62; } body.mob #st-class .petrow { zoom: .7; }
body.mob #st-class .records { flex: none; } body.mob #st-class .records > *:not(#b-cls-ok) { display: none; }
body.mob #st-class #b-cls-ok { margin: 0 !important; width: 100%; padding: 9px 12px; font-size: 15px; justify-content: center; }
/* phones: team screen without scrolling */
body.mob .team-win .win-b { padding: 8px 12px; } body.mob #team-body .btn.huge, body.mob #team-body .btn.big { padding: 9px 18px; font-size: 16px; }
@media (max-height: 370px) { body.mob #st-class .spellgrid { zoom: .5; } body.mob #st-class .cls-detail .desc { display: none; } }
/* phones: compact contents so that the whole window fits without scrolling */
body.mob #team-body { zoom: .84; } body.mob #iw-body { zoom: .82; } body.mob .pz-body { zoom: .8; } body.mob #qw-loot, body.mob .qw-opts { zoom: .86; }
body.mob #scr-results .win-b { zoom: .8; } body.mob #shop-offers, body.mob #shop-forge { zoom: .82; } body.mob #osa-body { zoom: .92; } body.mob #gatewin .win-b { zoom: .9; }
body.mob .lvl-body { zoom: 1; }
body.mob .shop-offers { grid-template-columns: 1fr 1fr !important; } body.mob #qw-loot, body.mob .qw-opts { zoom: .78; }
/* options: accent colours */
.accs { display: inline-flex; gap: 6px; } .accs button { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(0,0,0,.35); cursor: pointer; box-shadow: inset 0 2px 4px rgba(255,255,255,.35); }
.accs button.on { outline: 2px solid #fff3c4; outline-offset: 2px; }
/* Arabic: text right to left inside windows, tooltips and messages (the game screen keeps its layout) */
body.rtl .win-b, body.rtl .win-h, body.rtl .tip, body.rtl .toast, body.rtl .banner-msg, body.rtl .qtrack, body.rtl .hub-chat, body.rtl .gate-o, body.rtl .qw-o { direction: rtl; text-align: right; }
/* ============================================================ animalerie (living familiers) */
.animalerie { display: grid; grid-template-columns: 250px 1fr; gap: 12px; min-height: 0; }
.am-list { display: flex; flex-direction: column; gap: 5px; max-height: calc(62vh / var(--z)); overflow: auto; padding-right: 2px; }
.am-p { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 10px; border: 1px solid rgba(199,154,76,.28); background: rgba(0,0,0,.18); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.am-p.on { border-color: var(--acc, #e0a030); background: linear-gradient(90deg, rgba(var(--accRGB, 240,195,90), .22), rgba(0,0,0,.1)); }
.am-p.lock { opacity: .55; } .am-p.dead .am-img img { filter: grayscale(1) brightness(1.4) opacity(.6); }
.am-img { position: relative; flex: 0 0 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #5a4a32, #2a2117); display: grid; place-items: center; overflow: hidden; }
.am-img img { max-width: 40px; max-height: 40px; } .am-c { position: absolute; right: 0; bottom: 0; font-style: normal; color: #ffd57a; font-size: 13px; text-shadow: 0 1px 2px #000; }
.am-n b { display: block; font: 800 13px var(--title); } .am-n small { font-size: 11px; opacity: .85; display: flex; align-items: center; gap: 4px; }
.md { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: #7ed977; } .md.full { background: #6fb3ff; } .md.hungry { background: #f2c94c; } .md.starving { background: #e0441e; } .md.dead { background: #888; }
.am-d { border-radius: 12px; padding: 12px 14px; background: rgba(0,0,0,.2); border: 1px solid rgba(199,154,76,.3); display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.am-top { display: flex; gap: 14px; align-items: center; }
.am-hero { position: relative; flex: 0 0 104px; height: 104px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 38%, #6a5638, #2a2117 72%); box-shadow: inset 0 0 0 2px rgba(240,195,90,.35), 0 6px 16px rgba(0,0,0,.4); }
.am-hero img { max-width: 92px; max-height: 92px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.5)); animation: amidle 2.6s ease-in-out infinite; }
@keyframes amidle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.mood-dead .am-hero img { filter: grayscale(1) brightness(1.5) opacity(.55); animation: amghost 3s ease-in-out infinite; } @keyframes amghost { 50% { transform: translateY(-8px); opacity: .8; } }
.am-bub { position: absolute; right: -4px; top: -2px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #fbf3dc; box-shadow: 0 2px 6px rgba(0,0,0,.4); font-size: 16px; }
.am-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; } .am-id h3 { margin: 0; font: 800 20px var(--title); color: #ffe3a3; }
.hearts { display: flex; gap: 2px; } .ht { font-style: normal; font-size: 17px; line-height: 1; color: rgba(0,0,0,.45); text-shadow: 0 1px 0 rgba(255,230,180,.12); } .ht.on { color: #ff4d55; text-shadow: 0 0 6px rgba(255,60,70,.5); }
.am-xp { height: 7px; } .am-xp > i { background: linear-gradient(90deg, #8fd2ff, #2f79c8) !important; }
.am-st { font-size: 12.5px; } .am-st b { font-weight: 800; } .am-st.full b { color: #8ec5ff; } .am-st.ready b { color: #7ed977; } .am-st.hungry b { color: #f2c94c; } .am-st.starving b, .am-st.dead b { color: #ff7b5c; }
.corp { display: flex; align-items: center; gap: 10px; font-size: 12px; } .corp > span { width: 92px; opacity: .8; }
.cg { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); border-radius: 999px; overflow: hidden; border: 1px solid rgba(199,154,76,.35); }
.cg b { text-align: center; padding: 3px 0; font: 700 11px var(--body); opacity: .45; background: rgba(0,0,0,.25); } .cg b.on { opacity: 1; color: #1d140a; }
.cg b.c0 { background: #f2c94c; } .cg b.c1 { background: #7ed977; } .cg b.c2 { background: #f6985a; } .cg b.c3 { background: #e0441e; color: #fff; }
.am-eff, .am-diet, .am-food { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; } .am-eff > span, .am-diet > span, .am-food > span { width: 92px; opacity: .8; flex: none; }
.am-eff b.good { color: #7ed977; } .am-eff b.bad { color: #ff7b5c; } .am-eff small { flex: 1 1 100%; padding-left: 102px; opacity: .75; margin-top: -6px; }
.am-diet b { padding: 3px 9px; border-radius: 999px; background: rgba(0,0,0,.25); border: 1px solid rgba(199,154,76,.3); font-weight: 700; } .am-diet b.fav { border-color: #ffd57a; color: #ffe3a3; }
.am-fl { flex: 1; display: flex; flex-wrap: wrap; gap: 5px; } .am-f { padding: 2px; border-radius: 9px; border: 1px solid rgba(199,154,76,.3); background: rgba(0,0,0,.25); cursor: pointer; } .am-f:hover { border-color: #ffd57a; transform: translateY(-2px); } .am-f.fav { box-shadow: 0 0 0 1px rgba(255,213,122,.5); }
.am-act { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .am-act small { flex: 1; opacity: .8; }
.am-res { padding: 7px 10px; border-radius: 8px; font-weight: 700; font-size: 13px; } .am-res.good { background: rgba(80,170,80,.25); color: #a6ef9a; } .am-res.warn { background: rgba(240,150,60,.22); color: #ffc27a; } .am-res.bad { background: rgba(220,70,50,.22); color: #ff9c86; }
.am-d.lockd { align-items: center; text-align: center; justify-content: center; } .am-d.lockd .am-hero img { filter: grayscale(.8) brightness(.8); }
body.mob .animalerie { grid-template-columns: 200px 1fr; gap: 8px; } body.mob .am-list { max-height: calc(calc(100dvh / var(--z)) - 120px); }
body.mob .am-hero { flex-basis: 72px; height: 72px; } body.mob .am-hero img { max-width: 64px; max-height: 64px; } body.mob .am-d { padding: 8px 10px; gap: 6px; } body.mob .am-id h3 { font-size: 16px; }
body.mob .am-eff small { display: none; } body.mob .corp > span, body.mob .am-eff > span, body.mob .am-diet > span, body.mob .am-food > span { width: 70px; }
/* ============================================================ élevage: paddock, breeding, Dragodex */
.elevage { display: flex; flex-direction: column; gap: 8px; }
.el-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .el-head > b { font: 800 15px var(--title); } .el-head small { opacity: .75; flex: 1; }
.el-tabs { display: flex; gap: 4px; } .el-tabs button { padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(199,154,76,.4); background: rgba(0,0,0,.2); color: inherit; font: 700 12px var(--body); cursor: pointer; }
.el-tabs button.on { background: linear-gradient(180deg, rgba(var(--accRGB, 240,195,90), .3), rgba(var(--accRGB, 240,195,90), .08)); border-color: var(--acc, #e0a030); color: var(--acc2, #ffd57a); }
.el-pen { display: grid; grid-template-columns: 1.25fr 1fr; gap: 10px; min-height: 0; }
.meadow { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: minmax(104px, auto); gap: 6px; padding: 8px; border-radius: 14px;
  background: radial-gradient(ellipse at 30% 20%, rgba(255,255,200,.12), transparent 60%), repeating-linear-gradient(28deg, rgba(0,0,0,.05) 0 3px, transparent 3px 9px), linear-gradient(180deg, #4f7a3a, #3a5c2b); box-shadow: inset 0 0 0 2px #6b4a22, inset 0 0 0 5px #8a6330, inset 0 0 18px rgba(0,0,0,.5); }
.mob-z { position: relative; border-radius: 10px; padding: 5px; background: rgba(20,30,10,.28); border: 1px dashed rgba(255,240,190,.35); cursor: pointer; display: flex; flex-direction: column; gap: 3px; transition: background .15s; }
.mob-z:hover { background: rgba(255,240,190,.12); }
.zl { display: grid; grid-template-columns: auto 1fr; column-gap: 5px; align-items: center; } .zl i { grid-row: span 2; font-style: normal; font-size: 20px; } .zl b { font: 800 12px var(--title); color: #fff3c4; text-shadow: 0 1px 2px #000; } .zl small { font-size: 9.5px; color: #e6f0c8; opacity: .9; }
.zd { display: flex; flex-wrap: wrap; gap: 3px; flex: 1; align-content: flex-end; }
.din { position: relative; width: 50px; height: 52px; padding: 0; border-radius: 10px; border: 2px solid transparent; background: radial-gradient(ellipse at 50% 85%, rgba(0,0,0,.35), transparent 65%); cursor: pointer; display: grid; place-items: end center; }
.din.on { border-color: #ffd57a; background-color: rgba(255,213,122,.18); box-shadow: 0 0 10px rgba(255,213,122,.6); } .din.ride { outline: 2px solid #f39237; outline-offset: -2px; }
.din em { position: absolute; left: 1px; top: 0; font-style: normal; font-size: 11px; font-weight: 900; } .din em.F { color: #ff8fc8; } .din em.M { color: #8fc8ff; }
.din u { position: absolute; right: 0; top: -2px; text-decoration: none; font-size: 12px; } .din.tired { filter: saturate(.5) brightness(.85); } .din.wild::after { content: "🌿"; position: absolute; left: 0; bottom: -2px; font-size: 11px; } .pill.wild { background: #dff0c8; border-color: #8fb35a; color: #3d5a17; }
.dsp { display: inline-grid; place-items: end center; } .dsp canvas { display: block; filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)); }
.el-d { border-radius: 12px; padding: 10px 12px; background: rgba(0,0,0,.22); border: 1px solid rgba(199,154,76,.3); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.el-d.empty { justify-content: center; text-align: center; }
.el-top { display: flex; gap: 10px; align-items: center; } .el-top .dsp { flex: none; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle at 50% 70%, #5a4a32, #2a2117 72%); place-items: center; }
.el-n b { font: 800 17px var(--title); color: #ffe3a3; cursor: pointer; } .el-top small { opacity: .8; font-size: 12px; } .el-top .xpb { margin-top: 4px; }
.el-tag { margin-top: 4px; display: inline-block; padding: 2px 8px; border-radius: 999px; font: 700 11px var(--body); } .el-tag.preg { background: rgba(255,255,255,.12); } .el-tag.fert { background: rgba(255,120,180,.22); color: #ffb3d8; }
.el-g { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 12px; } .eg { display: grid; grid-template-columns: 66px 1fr 28px; align-items: center; gap: 6px; font-size: 11px; } .eg b { text-align: right; font-size: 11px; }
.egb { height: 7px; border-radius: 4px; background: rgba(0,0,0,.4); overflow: hidden; position: relative; } .egb i { display: block; height: 100%; background: linear-gradient(90deg, #d7b25a, #f5d68a); }
.egb.mid::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.4); }
.egb.pos i { background: linear-gradient(90deg, #6fb3ff, #a8d0ff); } .egb.neg i { background: linear-gradient(90deg, #e0441e, #ff9c86); } .egb.love i { background: linear-gradient(90deg, #ff6fae, #ffb3d8); } .egb.end i { background: linear-gradient(90deg, #f2c94c, #ffe39a); }
.egb.en i { background: linear-gradient(90deg, #4fbf6a, #9ae6a8); } .egb.fat i { background: linear-gradient(90deg, #8a7ac8, #c3b8ff); } .egb.fat.full i { background: #e0441e; }
.el-tr { display: flex; flex-wrap: wrap; gap: 4px; } .el-b { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 11px; } .el-b span { opacity: .75; margin-right: 4px; } .el-b b { padding: 2px 7px; border-radius: 999px; background: rgba(60,100,200,.2); color: #a8c8ff; }
.el-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .el-food { display: inline-flex; gap: 3px; align-items: center; } .el-food small { opacity: .75; margin-right: 2px; } .el-food button { padding: 1px; border-radius: 8px; border: 1px solid rgba(199,154,76,.35); background: rgba(0,0,0,.25); cursor: pointer; }
.el-msg { padding: 5px 9px; border-radius: 8px; background: rgba(80,170,80,.2); color: #a6ef9a; font-weight: 700; font-size: 12px; } .el-d .warn { color: #ffb27a; margin: 0; }
.el-breed { display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: 10px; } .bc h4 { margin: 0 0 5px; font: 800 13px var(--title); } .bl { display: flex; flex-direction: column; gap: 4px; max-height: calc(52vh / var(--z)); overflow: auto; }
.bp { display: flex; gap: 6px; align-items: center; padding: 3px 6px; border-radius: 9px; border: 1px solid rgba(199,154,76,.3); background: rgba(0,0,0,.2); color: inherit; font: inherit; text-align: left; cursor: pointer; } .bp.on { border-color: #ff8fc8; box-shadow: 0 0 0 1px rgba(255,143,200,.4); } .bp.no { opacity: .45; cursor: default; }
.bp b { display: block; font-size: 12px; } .bp small { font-size: 10.5px; opacity: .8; }
.bmid { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 8px; border-radius: 12px; background: rgba(0,0,0,.2); }
.bpair { display: flex; align-items: center; gap: 6px; } .bpair i { font-style: normal; font-size: 26px; animation: amidle 1.8s ease-in-out infinite; }
.dex-h { display: flex; align-items: center; gap: 10px; font-size: 13px; } .dex-h b { font: 800 15px var(--title); } .dex-h .bar { flex: 1; height: 8px; }
.dex { display: flex; flex-direction: column; gap: 6px; max-height: calc(58vh / var(--z)); overflow: auto; } .dexg { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.dg { width: 34px; font: 900 13px var(--title); color: #ffd57a; } .dexc { width: 70px; padding: 3px; border-radius: 9px; text-align: center; background: rgba(0,0,0,.25); border: 1px solid rgba(199,154,76,.2); }
.dexc:not(.got) canvas { filter: brightness(0) opacity(.55); } .dexc small { display: block; font-size: 9.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dexc.got { border-color: rgba(255,213,122,.55); background: rgba(255,213,122,.08); }
body.mob .el-pen { grid-template-columns: 1.15fr 1fr; gap: 6px; } body.mob .meadow { grid-auto-rows: minmax(78px, auto); padding: 5px; gap: 4px; } body.mob .zl small { display: none; }
body.mob .din { width: 40px; height: 42px; } body.mob .el-top .dsp { width: 64px; height: 64px; } body.mob .el-d { padding: 7px 9px; gap: 4px; } body.mob .el-breed { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
/* saved run: "Resume" on the home screen, "Save and quit" in the quit window */
.btn.resume { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 8px 34px 8px 14px; border-radius: 12px; border: 1px solid #6fd08a; background: linear-gradient(180deg, #2f8a4a, #1e5e31); color: #eaffef; font: 800 15px var(--title); box-shadow: 0 0 14px rgba(80,200,120,.35); }
.btn.resume i { font-style: normal; font-size: 16px; } .btn.resume small { display: block; font: 700 11px var(--body); opacity: .85; }
.btn.resume .drop { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); font-style: normal; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.3); font-size: 11px; }
.qw-o.save { border-color: #6fd08a !important; } .qw-o.save .qi { background: linear-gradient(180deg, #2f8a4a, #1e5e31) !important; }
body.mob .btn.resume { font-size: 12px; padding: 6px 28px 6px 10px; } body.mob .btn.resume small { display: none; }
/* ============================================================ friends and groups */
.socwin .win-b { display: flex; flex-direction: column; gap: 8px; }
.lfg-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .lfg-top small { opacity: .75; max-width: 360px; }
.lfg-post { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; padding: 10px; border-radius: 12px; background: rgba(0,0,0,.22); border: 1px solid rgba(199,154,76,.35); }
.lfg-post label { display: flex; flex-direction: column; gap: 3px; font: 700 11px var(--body); opacity: .9; } .lfg-post label.grow { flex: 1; min-width: 200px; } .lfg-post input, .lfg-post select { padding: 6px 8px; border-radius: 8px; }
.lfg-f { display: flex; align-items: center; gap: 10px; font-size: 12px; } .lfg-f select { padding: 5px 8px; border-radius: 8px; }
.lfg-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 8px; }
.lfg { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: linear-gradient(135deg, rgba(255,210,140,.07), rgba(0,0,0,.2)); border: 1px solid rgba(199,154,76,.35); }
.lfg.no { opacity: .55; } .lfg:hover:not(.no) { border-color: var(--acc, #e0a030); }
.lz { flex: 0 0 64px; height: 64px; border-radius: 12px; display: grid; place-items: center; background: radial-gradient(circle at 50% 70%, rgba(255,210,140,.2), rgba(0,0,0,.3)); overflow: hidden; } .lz img { max-width: 60px; max-height: 60px; }
.lfg b { font: 800 14px var(--title); color: #ffe3a3; } .lfg small { display: block; font-size: 11px; opacity: .8; } .lfg p { margin: 3px 0; font-size: 12px; font-style: italic; opacity: .9; }
.lp { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .lp span { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px 1px 1px; border-radius: 999px; background: rgba(0,0,0,.3); font-size: 11px; } .lp img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; object-position: top; } .lp em { font-style: normal; font-size: 11px; opacity: .7; }
.la { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; }
.lfg-empty { text-align: center; padding: 30px 10px; opacity: .9; }
.fsearch { display: flex; gap: 8px; } .fsearch input { flex: 1; padding: 8px 10px; border-radius: 8px; }
.socwin h4 { margin: 6px 0 2px; font: 800 14px var(--title); color: #ffd57a; }
.frl { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 6px; }
.fr { display: flex; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 10px; background: rgba(0,0,0,.2); border: 1px solid rgba(199,154,76,.25); }
.fr img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; object-position: top; background: #2a2117; } .fr.off img { filter: grayscale(.8) opacity(.7); }
.fr b { font-size: 13px; } .fr .tt { font-size: 10.5px; color: #c9a0ff; } .fr small { display: flex; align-items: center; gap: 4px; font-size: 11px; opacity: .85; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: #777; } .dot.vil { background: #7ed977; } .dot.grp { background: #f2c94c; } .dot.run { background: #f39237; box-shadow: 0 0 6px #f39237; }
.fa { display: flex; gap: 4px; flex: none; }
.finv { position: fixed; left: 50%; top: 70px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: linear-gradient(180deg, #4a3a27, #2a2117); border: 1px solid #e0a030; color: #f2e6c8; box-shadow: 0 10px 30px rgba(0,0,0,.6); animation: stbin .3s ease-out; }
.side-col button .badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; border-radius: 9px; background: #e0441e; color: #fff; font: 900 11px/18px var(--body); font-style: normal; padding: 0 4px; }
body.mob .lfg-list, body.mob .frl { grid-template-columns: 1fr 1fr; } body.mob .lfg { padding: 6px; gap: 6px; } body.mob .lz { flex-basis: 46px; height: 46px; } body.mob .lfg-top small { display: none; }
/* phones: the challenge is a small chip, not half the screen */
body.mob .chal { top: 50px; left: max(10px, env(safe-area-inset-left)); transform: none; text-align: left; min-width: 0; max-width: calc(38vw / var(--z)); padding: 3px 10px; border-width: 1px; border-radius: 10px; pointer-events: auto; box-shadow: 0 3px 10px rgba(0,0,0,.35); }
body.mob .chal .ch-h { display: none; } body.mob .chal b { font-size: 12px; line-height: 1.2; } body.mob .chal b::before { content: '⚑ '; color: #b07a10; }
body.mob .chal small { font-size: 10.5px; line-height: 1.25; } body.mob .chal i { font-size: 11px; margin-top: 0; }
body.mob .chal.mini { padding: 2px 9px; opacity: .88; } body.mob .chal.mini small { display: none; } body.mob .chal.mini b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.mob .frl, body.mob .lfg-list { grid-template-columns: 1fr; }
/* ============================================================ guild (redesign) */
.g2 { display: flex; flex-direction: column; gap: 10px; }
.g2 h4 { margin: 0 0 6px; font: 800 14px var(--title); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; } .g2 h4 small { font: 600 11px var(--body); }
.g2-top { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; } .g2-top h3 { margin: 0; font: 800 20px var(--title); } .g2-top p { margin: 2px 0 0; max-width: 520px; }
.g2-mode { display: flex; padding: 3px; border-radius: 999px; background: #efe3c2; border: 1px solid #d9bd7a; }
.g2-mode button { border: 0; background: transparent; padding: 8px 18px; border-radius: 999px; font: 800 13px var(--title); color: var(--ink); cursor: pointer; position: relative; }
.g2-mode button.on { background: linear-gradient(180deg, #ffb35c, var(--orange2)); color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.g2-mode .badge { position: static; display: inline-block; min-width: 16px; height: 16px; border-radius: 8px; background: #e0441e; color: #fff; font: 900 10px/16px var(--body); font-style: normal; padding: 0 4px; }
.g2-bar { display: flex; gap: 10px; align-items: center; } .g2-bar input[type=text], .g2-bar #g-q { flex: 1; padding: 8px 12px; border-radius: 10px; border: 1px solid #b9a77c; background: #fffaf0; font: 14px var(--body); }
.gcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
.gcard { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 14px; background: #fbf3dc; border: 1px solid var(--parch-line); border-left: 5px solid var(--c1); }
.gcard.inv { border-color: #e0a030; box-shadow: 0 0 0 2px rgba(224,160,48,.35); } .gcard .grow { flex: 1; min-width: 0; }
.gcard b { font: 800 14px var(--title); } .gcard b small { color: #8b5d00; } .gcard em, .g2 em { display: block; font-size: 12px; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-m { display: flex; gap: 6px; align-items: center; margin: 4px 0 2px; font-size: 11px; } .gc-m .lvl { font-weight: 900; color: #8b5d00; } .gc-m .mb { flex: 1; height: 6px; border-radius: 3px; background: #e2d4ae; overflow: hidden; } .gc-m .mb i { display: block; height: 100%; background: #e08a1e; }
.gcard small.ok { color: #3d7a1f; font-weight: 700; }
.g2-empty { text-align: center; padding: 30px; }
/* emblem editor */
.g2-ed { display: grid; grid-template-columns: 240px 1fr; gap: 16px; align-items: start; }
.g2-pv { display: flex; flex-direction: column; align-items: center; gap: 10px; position: sticky; top: 0; }
.g2-pen { width: 200px; padding: 18px 12px 46px; clip-path: polygon(0 0, 100% 0, 100% 86%, 50% 100%, 0 86%); background: linear-gradient(180deg, var(--c1), color-mix(in srgb, var(--c1) 55%, #000)); color: #fff; text-align: center; box-shadow: inset 0 0 0 3px rgba(255,255,255,.12); filter: drop-shadow(0 6px 10px rgba(0,0,0,.4)); }
.g2-pen .pen-in { display: flex; flex-direction: column; align-items: center; gap: 2px; } .g2-pen b { font: 800 17px var(--title); text-shadow: 0 2px 3px rgba(0,0,0,.6); margin-top: 6px; word-break: break-word; } .g2-pen small { font: 900 12px var(--body); color: var(--c2); text-shadow: 0 1px 2px rgba(0,0,0,.8); letter-spacing: 2px; }
.g2-pen em { white-space: normal !important; font-size: 11.5px; margin-top: 4px; text-shadow: 0 1px 2px rgba(0,0,0,.7); opacity: .95 !important; }
.g2-fm { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.g2-st { display: flex; gap: 8px; align-items: center; font: 800 14px var(--title); } .g2-st b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--orange2, #d9631b); color: #fff; font: 900 12px var(--body); }
.g2-id { display: flex; gap: 8px; } .g2-id label { flex: 1; } .g2-id label.tg { flex: 0 0 90px; }
.g2-fm label { display: flex; flex-direction: column; gap: 3px; font: 700 12px var(--body); } .g2-fm label input:not([type=color]) { padding: 8px 10px; border-radius: 10px; border: 1px solid #b9a77c; background: #fffaf0; font: 15px var(--body); }
.g2-parts { margin: 0; } .g2-parts button { padding: 7px; font-size: 13px; }
.g2 .gpick { max-height: 180px; overflow-y: auto; padding: 2px; } .g2 .gpick.sh button { padding: 4px; } .g2 .gpick button.sym { width: 40px; height: 40px; }
.gcol { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; font: 700 12px var(--body); } .g2 .gpick button.col { width: 28px; height: 28px; border-radius: 50%; }
.cpick { position: relative; width: 28px; height: 28px; border-radius: 50%; display: grid !important; place-items: center; color: #fff; font: 900 16px var(--body) !important; text-shadow: 0 1px 2px #000; border: 2px dashed rgba(0,0,0,.35); cursor: pointer; } .cpick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.g2-go { display: flex; gap: 10px; align-items: center; justify-content: flex-end; padding-top: 8px; border-top: 1px solid var(--parch-line); } .g2-go .small { flex: 1; }
/* banner of my guild */
.g2-ban { display: flex; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 16px; border: 1px solid #d9bd7a; border-left: 6px solid var(--c1); }
.g2-ban .grow { flex: 1; min-width: 0; } .g2-ban h3 { margin: 0; font: 800 21px var(--title); } .g2-ban h3 small { color: #8b5d00; font-size: 14px; }
.gb-e { flex: none; filter: drop-shadow(0 4px 8px rgba(0,0,0,.35)); }
.gb-x { display: flex; gap: 10px; align-items: center; margin: 6px 0 4px; } .gb-x .lv { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none; font: 900 16px var(--title); color: #fff; background: radial-gradient(circle at 35% 30%, #ffd57a, #c77a16); box-shadow: 0 0 0 3px rgba(199,122,22,.3); } .gb-x .xpb { height: 9px; border-radius: 5px; margin: 0 0 2px; } .gb-x small { font-size: 11px; opacity: .8; }
.gb-c { display: flex; flex-wrap: wrap; gap: 6px; } .gb-c span { padding: 2px 9px; border-radius: 999px; background: rgba(255,255,255,.55); border: 1px solid rgba(0,0,0,.08); font: 700 11.5px var(--body); } .gb-c .onl { color: #3d7a1f; } .gb-c .pt { background: #ffe08a; color: #6a4300; }
.g2-ban .gacts { display: flex; flex-direction: column; gap: 6px; align-items: stretch; flex: none; }
.sw { display: flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 700; } .sw input { display: none; } .sw i { width: 32px; height: 18px; border-radius: 9px; background: #c9b78a; position: relative; transition: background .2s; } .sw i::after { content: ''; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left .2s; } .sw input:checked + i { background: #4ea52d; } .sw input:checked + i::after { left: 16px; }
.g2-nav { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; border-bottom: 2px solid var(--parch-line); } .g2-nav::-webkit-scrollbar { display: none; }
.g2-nav button { flex: none; display: flex; gap: 6px; align-items: center; padding: 8px 14px; border: 0; border-radius: 10px 10px 0 0; background: transparent; font: 800 13px var(--title); color: var(--ink); cursor: pointer; opacity: .75; margin-bottom: -2px; border-bottom: 3px solid transparent; }
.g2-nav button i { font-style: normal; } .g2-nav button.on { opacity: 1; border-bottom-color: var(--orange2, #d9631b); background: rgba(255,200,120,.18); } .g2-nav button:hover { opacity: 1; }
.g2 .gbody { min-height: 240px; }
.g2-card { padding: 10px 12px; border-radius: 14px; background: #fbf3dc; border: 1px solid var(--parch-line); }
.g2-home { display: grid; grid-template-columns: 1.2fr 1fr; gap: 10px; }
.gm { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--parch-line); } .gm:last-child { border-bottom: 0; } .gm .grow { flex: 1; } .gm small { display: block; font-size: 11.5px; opacity: .8; } .gm.done { opacity: .7; } .gm.done .qbar i { background: linear-gradient(90deg, #f2c94c, #e08a1e); }
.g2-on { display: flex; flex-wrap: wrap; gap: 6px; } .g2-on span { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 2px; border-radius: 999px; background: #fffaf0; border: 1px solid var(--parch-line); font: 700 12px var(--body); } .g2-on img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; object-position: top; }
.g2 .gchat { height: 300px; display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 12px; } .g2 .gchat.mini { height: 170px; }
.bub { align-self: flex-start; max-width: 78%; padding: 6px 10px 4px; border-radius: 4px 14px 14px 14px; background: #fffaf0; border: 1px solid var(--parch-line); font-size: 13px; } .bub b { display: block; font-size: 11px; color: #8b5d00; } .bub span { word-break: break-word; } .bub small { display: block; text-align: right; font-size: 9.5px; opacity: .6; }
.bub.me { align-self: flex-end; border-radius: 14px 4px 14px 14px; background: #ffe7b8; border-color: #e5c27c; }
.g2-say { display: flex; gap: 6px; margin-top: 6px; } .g2-say input { flex: 1; padding: 8px 10px; border-radius: 10px; border: 1px solid #b9a77c; background: #fffaf0; font: 14px var(--body); }
.g2-mt { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; } .g2-mt small { display: block; font-size: 11.5px; } .shr { display: flex; gap: 10px; align-items: center; margin: 6px 0; } .shr input { flex: 1; accent-color: var(--orange2, #d9631b); } .shr b { font: 900 16px var(--title); min-width: 48px; text-align: right; }
.g2-fr { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 6px; } .chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 2px; border-radius: 999px; border: 1px solid #d9bd7a; background: #fffaf0; font: 700 11.5px var(--body); cursor: pointer; color: var(--ink); } .chip img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; object-position: top; } .chip:disabled { opacity: .5; }
.g2-mem { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 6px; }
.gmc { display: flex; gap: 8px; align-items: center; padding: 7px 9px; border-radius: 12px; background: #fbf3dc; border: 1px solid var(--parch-line); } .gmc.me { border-color: #e0a030; } .gmc .grow { flex: 1; min-width: 0; } .gmc img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; object-position: top; background: #e8d9b0; flex: none; } .gmc:not(.on) img { filter: grayscale(.7); opacity: .8; }
.gmc b { font-size: 13.5px; } .gmc small { display: flex; align-items: center; gap: 4px; font-size: 11px; opacity: .85; } .gmc .ga { display: flex; flex-direction: column; gap: 3px; } .gmc .ga .btn { padding: 2px 8px; font-size: 11px; }
.rk.lead, .rk.second, .rk.member { display: inline-block; padding: 0 7px; border-radius: 999px; font: 800 10px/16px var(--body); vertical-align: 1px; } .rk.lead { background: #ffd57a; color: #6a4300; } .rk.second { background: #cfe6ff; color: #1d4f86; } .rk.member { background: #e8dcbf; color: #6b5a3a; }
.g2 .perks { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .g2 .perk { flex-direction: row; align-items: center; gap: 10px; padding: 10px; } .g2 .perk .grow { flex: 1; } .g2 .perk small { display: block; font-size: 11.5px; } .g2 .perk.can { border-color: #e0a030; box-shadow: 0 0 0 2px rgba(224,160,48,.3); } .g2 .perk.max { opacity: .8; }
.perk .pi { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; background: #efe3c2; flex: none; } .g2 .perk .pips { align-items: center; margin-top: 4px; } .g2 .perk .pips small { margin-left: 6px; } .perk .why { max-width: 110px; text-align: right; }
.g2-pts { margin: 0 0 8px; }
.g2-rank { display: flex; flex-direction: column; gap: 5px; } .grr { display: flex; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 12px; background: #fbf3dc; border: 1px solid var(--parch-line); } .grr .grow { flex: 1; min-width: 0; } .grr .rk { width: 30px; text-align: center; font: 900 17px var(--title); } .grr.p1 { background: linear-gradient(90deg, #ffe7a6, #fbf3dc); } .grr.p2 { background: linear-gradient(90deg, #eceae4, #fbf3dc); } .grr.p3 { background: linear-gradient(90deg, #f3d2b0, #fbf3dc); } .grr.me { border-color: #e0a030; box-shadow: 0 0 0 2px rgba(224,160,48,.3); }
@media (max-width: 900px) { .g2-ed { grid-template-columns: 1fr; } .g2-pv { position: static; flex-direction: row; justify-content: center; } .g2-pen { width: 170px; } .g2-home, .g2-mt { grid-template-columns: 1fr; } }
body.mob .g2-ban { flex-wrap: wrap; padding: 8px; gap: 8px; } body.mob .gb-e .emb2 { transform: scale(.7); transform-origin: left center; } body.mob .g2-ban .gacts { flex-direction: row; flex-wrap: wrap; width: 100%; } body.mob .g2-ban h3 { font-size: 17px; }
body.mob .g2-ed { grid-template-columns: 200px 1fr; gap: 10px; } body.mob .g2-pv { flex-direction: column; position: sticky; } body.mob .g2-pen { width: 160px; padding-bottom: 36px; } body.mob .g2-home, body.mob .g2-mt { grid-template-columns: 1fr 1fr; } body.mob .g2 .gchat.mini { height: 120px; } body.mob .g2 .gchat { height: 180px; } body.mob .g2-top p { display: none; }
body.mob .gcards, body.mob .g2-mem, body.mob .g2 .perks { grid-template-columns: 1fr 1fr; } body.mob .gcard { padding: 6px; gap: 6px; } body.mob .gc-e .emb2 { transform: scale(.75); }
/* room places and invitations */
.slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 4px 0 8px; }
.slotc { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 12px 6px 10px; border-radius: 14px; background: #fbf3dc; border: 1px solid var(--parch-line); min-height: 150px; font: inherit; color: inherit; }
.slotc img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: top; background: #e9dcb7; border: 3px solid #c79a4c; } .slotc.ready img { border-color: #4ea52d; box-shadow: 0 0 12px rgba(80,180,60,.5); } .slotc.me { border-color: #e0a030; }
.slotc b { font: 800 14px var(--title); margin-top: 4px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .slotc small { font-size: 11px; opacity: .8; } .slotc .ttl { font-size: 10.5px; color: #8a4bb8; }
.slotc .crown { position: absolute; top: 6px; right: 8px; } .slotc .ok { margin-top: auto; font-weight: 800; color: #3d7a1f; } .slotc .wait { margin-top: auto; font-size: 11px; opacity: .65; }
.slotc.free { border: 2px dashed #c7a76a; background: rgba(255,250,240,.5); cursor: pointer; justify-content: center; transition: transform .15s, border-color .15s; } .slotc.free:hover { transform: translateY(-2px); border-color: var(--orange2, #d9631b); }
.slotc .plus { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font: 300 38px/1 var(--body); color: #fff; background: linear-gradient(180deg, #ffb35c, var(--orange2, #d9631b)); box-shadow: 0 4px 10px rgba(0,0,0,.25); }
.slotn { display: flex; gap: 4px; align-items: center; justify-content: flex-end; margin-bottom: 6px; } .slotn button { width: 30px; height: 26px; border-radius: 8px; border: 1px solid #c7a76a; background: #fffaf0; font: 800 13px var(--body); color: var(--ink); cursor: pointer; } .slotn button.on { background: var(--orange2, #d9631b); color: #fff; border-color: #7a3207; } .slotn button:disabled { opacity: .4; }
.invpop { padding: 10px 12px; border-radius: 14px; background: #fff8e4; border: 2px solid #e0a030; box-shadow: 0 8px 24px rgba(0,0,0,.25); margin-bottom: 8px; max-height: 300px; overflow: auto; }
.ip-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .ip-h b { font: 800 15px var(--title); } .invpop h5 { margin: 8px 0 4px; font: 800 12px var(--body); text-transform: uppercase; letter-spacing: 1px; opacity: .75; }
.ipr { display: flex; gap: 8px; align-items: center; padding: 5px 4px; border-bottom: 1px dashed var(--parch-line); } .ipr:last-child { border-bottom: 0; } .ipr img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; object-position: top; background: #e9dcb7; } .ipr .grow { flex: 1; min-width: 0; } .ipr small { display: flex; align-items: center; gap: 4px; font-size: 11px; opacity: .85; } .ipr .ok { color: #3d7a1f; font-weight: 800; }
body.mob .slotc { min-height: 0; padding: 6px 4px; } body.mob .slotc img { width: 40px; height: 40px; border-width: 2px; } body.mob .slotc .plus { width: 36px; height: 36px; font-size: 26px; } body.mob .slotc.free small { display: none; } body.mob .slotc b { font-size: 12px; }
body.mob .g2-ban { flex-wrap: nowrap; padding: 6px 8px; } body.mob .g2-ban .gacts { flex-direction: column; width: auto; } body.mob .gb-e { width: 64px; height: 64px; overflow: visible; } body.mob .g2-ban em, body.mob .gb-x small { display: none; } body.mob .gb-x { margin: 2px 0; } body.mob .gb-x .lv { width: 28px; height: 28px; font-size: 13px; } body.mob .g2-nav button { padding: 5px 9px; font-size: 12px; }
.gc-form { display: flex; gap: 4px; margin-top: 6px; } .gc-form input { flex: 1; min-width: 0; padding: 5px 8px; border-radius: 8px; border: 1px solid #b9a77c; background: #fffaf0; font: 13px var(--body); }
.gc-ap { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; flex: none; }
.g2-ent { display: flex; flex-direction: column; gap: 2px; } .g2-ent small { font: 700 10.5px var(--body); opacity: .75; } .g2-entr { font-weight: 700; text-align: right; }
.seg2 { display: flex; padding: 2px; border-radius: 999px; background: #efe3c2; border: 1px solid #d9bd7a; } .seg2 button { border: 0; background: transparent; padding: 4px 10px; border-radius: 999px; font: 800 11px var(--body); color: var(--ink); cursor: pointer; white-space: nowrap; } .seg2 button.on { background: linear-gradient(180deg, #ffb35c, var(--orange2, #d9631b)); color: #fff; }
.gb-c span[data-gsub] { cursor: pointer; } .gmc.app { border-color: #e0a030; } .gmc { flex-wrap: wrap; } .gmc small.gmc-c { display: block; flex-basis: 100%; padding: 4px 2px 0; border-top: 1px dashed var(--parch-line); font-size: 11px; line-height: 1.4; } .gmc small.gmc-c b { font-size: 11.5px; white-space: nowrap; } .gmc.app em { display: block; white-space: normal; font-size: 11.5px; }
.gcard { flex-wrap: wrap; } .gcard .gc-form { flex: 1 0 100%; margin-top: 2px; }
.gcard .grow { flex: 1 1 0; }
/* ============================================================ apparat (living objects, Caméléon, Mimibiote) */
.ap { display: grid; grid-template-columns: 260px 1fr; gap: 14px; align-items: start; }
.ap-side { display: flex; flex-direction: column; gap: 7px; position: sticky; top: 0; }
.ap-pre { height: 230px; border-radius: 16px; background: radial-gradient(ellipse 24% 5% at 50% 91%, rgba(0,0,0,.3), transparent), radial-gradient(circle at 50% 40%, #fff6dc, #e9d6a6); border: 1px solid var(--parch-line); display: grid; place-items: center; overflow: hidden; }
.ap-pre canvas { width: 220px; height: 230px; }
.ap-slot { display: flex; gap: 8px; align-items: center; padding: 5px 8px; border-radius: 12px; background: #fbf3dc; border: 1px solid var(--parch-line); } .ap-slot.on { border-color: #e0a030; } .ap-slot .grow { flex: 1; min-width: 0; } .ap-slot small { display: block; font-size: 10.5px; opacity: .7; } .ap-slot b { font-size: 12px; }
.apic { position: relative; display: inline-block; flex: none; border-radius: 10px; background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.55), rgba(0,0,0,.06)); overflow: hidden; } .apic > i, .apic > em { position: absolute; left: 50%; top: 50%; } .apic > em { mix-blend-mode: color; opacity: .6; } .apic.e { display: grid; place-items: center; font-size: 22px; opacity: .5; }
.ap-mimi { padding: 8px 10px; border-radius: 12px; background: linear-gradient(135deg, rgba(122,224,255,.18), rgba(176,123,255,.12)); border: 1px solid rgba(80,160,220,.4); } .mm-h { display: flex; gap: 8px; align-items: center; } .mm-i { font-size: 26px; } .mm-h small { display: block; font-size: 11px; opacity: .8; } .mm-b { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.ap-f { display: flex; gap: 4px; margin-bottom: 8px; align-items: center; } .ap-f button { padding: 6px 14px; border-radius: 999px; border: 1px solid #c7a76a; background: #fffaf0; font: 800 12px var(--body); color: var(--ink); cursor: pointer; } .ap-f button.on { background: linear-gradient(180deg, #ffb35c, var(--orange2, #d9631b)); color: #fff; border-color: #7a3207; }
.ap-intro { margin: 0 0 8px; opacity: .85; }
.ap-liv { display: flex; flex-direction: column; gap: 8px; }
.lv { border-radius: 14px; background: #fbf3dc; border: 1px solid var(--parch-line); padding: 8px 10px; } .lv.on { border-color: #e0a030; box-shadow: 0 0 0 2px rgba(224,160,48,.3); } .lv.lock { opacity: .6; } .lv.lock .apic > i { filter: brightness(0) opacity(.35); }
.lv-h { display: flex; gap: 10px; align-items: center; } .lv-h .grow { flex: 1; min-width: 0; } .lv-h b { font: 800 15px var(--title); } .lv-h small { display: block; font-size: 11.5px; } .lv-a { display: flex; flex-direction: column; gap: 4px; flex: none; }
.lvx { height: 8px; border-radius: 4px; background: #e2d4ae; overflow: hidden; margin: 4px 0 2px; } .lvx i { display: block; height: 100%; background: linear-gradient(90deg, #ffd57a, #e08a1e); }
.lv-skins { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin-top: 8px; } .lsk { display: flex; flex-direction: column; align-items: center; padding: 3px 0 2px; border-radius: 10px; border: 2px solid transparent; background: #fffaf0; cursor: pointer; font: inherit; color: inherit; } .lsk small { font: 800 10px var(--body); opacity: .75; } .lsk.on { border-color: #e0a030; background: #fff0c8; } .lsk.lock { cursor: default; } .lsk.lock .apic > i { filter: brightness(0) opacity(.25); }
.lv-feed { margin-top: 8px; padding: 8px; border-radius: 12px; background: rgba(255,250,240,.6); border: 1px dashed #d9bd7a; } .lf-h { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; } .lf-h small { font-size: 11px; opacity: .75; } .lf-t { color: #3d7a1f; }
.lf-l { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 4px; max-height: 240px; overflow: auto; } .lf { display: flex; gap: 6px; align-items: center; padding: 3px 6px; border-radius: 10px; background: #fffaf0; border: 1px solid var(--parch-line); } .lf.on { border-color: #4ea52d; } .lf .grow { flex: 1; min-width: 0; } .lf b { font-size: 12px; } .lf small { display: block; font-size: 10.5px; opacity: .75; }
.lf-q { display: flex; gap: 2px; align-items: center; } .lf-q button { min-width: 24px; height: 24px; border-radius: 6px; border: 1px solid #c7a76a; background: #fff; font: 800 12px var(--body); color: var(--ink); cursor: pointer; padding: 0 5px; } .lf-q b { min-width: 26px; text-align: center; }
.ap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.ap-c { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; border-radius: 14px; background: #fbf3dc; border: 2px solid var(--parch-line); text-align: center; } .ap-c b { font: 800 11.5px var(--title); line-height: 1.15; min-height: 26px; display: flex; align-items: center; } .ap-c small { font-size: 10.5px; opacity: .75; } .ap-c.on { border-color: #e0a030; box-shadow: 0 0 0 3px rgba(224,160,48,.3); } .ap-c.lock .apic > i { filter: brightness(0) opacity(.35); } .ap-c.lock b { opacity: .55; }
.ap-won { position: fixed; left: 50%; top: 84px; transform: translateX(-50%); z-index: 70; display: flex; gap: 12px; align-items: center; padding: 10px 18px 10px 10px; border-radius: 16px; background: linear-gradient(180deg, #4a3a27, #2a2117); border: 2px solid var(--rc); color: #f2e6c8; box-shadow: 0 0 30px color-mix(in srgb, var(--rc) 50%, transparent), 0 10px 30px rgba(0,0,0,.6); animation: stbin .35s ease-out; transition: opacity .5s, transform .5s; }
.ap-won small { display: block; font: 900 10px var(--body); letter-spacing: 2px; color: var(--rc); } .ap-won b { display: block; font: 800 18px var(--title); } .ap-won span { font-size: 11px; opacity: .8; } .ap-won.out { opacity: 0; transform: translateX(-50%) translateY(-20px); }
@media (max-width: 900px) { .ap { grid-template-columns: 1fr; } .ap-side { position: static; } }
body.mob .ap { grid-template-columns: 190px 1fr; gap: 8px; } body.mob .ap-pre { height: 140px; } body.mob .ap-pre canvas { width: 134px; height: 140px; } body.mob .ap-mimi small, body.mob .ap-intro { display: none; } body.mob .lv-skins { grid-template-columns: repeat(5, 1fr); } body.mob .ap-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 5px; } body.mob .ap-side { position: sticky; }
/* ============================================================ leaderboards */
.rkwin { width: min(1080px, calc(96vw / var(--z))); } .rkwin .win-b { display: flex; flex-direction: column; gap: 8px; }
.rk-tabs button { font-size: 14px; }
.rk-zones { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.rz { flex: 0 0 112px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px; border-radius: 12px; border: 2px solid var(--parch-line); background: #fbf3dc; cursor: pointer; font: inherit; color: inherit; } .rz.on { border-color: var(--orange2, #d9631b); box-shadow: 0 0 0 2px rgba(217,99,27,.25); background: #fff0c8; } .rz.none { opacity: .6; }
.rz b { font: 800 11.5px var(--title); text-align: center; line-height: 1.1; } .rz small { font-size: 10px; opacity: .75; }
.rz-i { width: 54px; height: 50px; display: grid; place-items: center; overflow: hidden; } .rz-i img { max-width: 54px; max-height: 50px; } .rz-i.big { width: 84px; height: 80px; } .rz-i.big img { max-width: 84px; max-height: 80px; }
.rk-chips { display: flex; flex-wrap: wrap; gap: 4px; } .rk-chips button { padding: 6px 13px; border-radius: 999px; border: 1px solid #c7a76a; background: #fffaf0; font: 800 12px var(--body); color: var(--ink); cursor: pointer; } .rk-chips button.on { background: linear-gradient(180deg, #ffb35c, var(--orange2, #d9631b)); color: #fff; border-color: #7a3207; }
.rk-me { display: flex; gap: 8px; align-items: center; padding: 7px 12px; border-radius: 12px; background: linear-gradient(90deg, rgba(255,200,90,.35), rgba(255,200,90,.08)); border: 1px solid #e0a030; font-size: 12.5px; } .rk-me b { font: 900 18px var(--title); color: #a85d00; } .rk-me small { opacity: .75; } .rk-me.none { background: rgba(0,0,0,.05); border-style: dashed; border-color: var(--parch-line); }
.rk-pod { display: flex; justify-content: center; align-items: flex-end; gap: 10px; padding: 14px 0 0; }
.pd { position: relative; width: 190px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; }
.pd-a { position: relative; } .pd-a .rk-f, .pd-a .rk-team img, .pd-a .rk-emb { filter: drop-shadow(0 4px 8px rgba(0,0,0,.35)); }
.pd .rk-f { width: 74px; height: 74px; border-radius: 50%; border: 4px solid #c0c0c0; } .pd.p1 .rk-f { width: 92px; height: 92px; border-color: #f2c94c; box-shadow: 0 0 24px rgba(242,201,76,.6); } .pd.p3 .rk-f { border-color: #cd7f32; }
.pd-m { position: absolute; right: -8px; bottom: -4px; font-size: 26px; } .pd.p1 .pd-m { font-size: 32px; }
.pd b { font: 800 14px var(--title); margin-top: 4px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pd.p1 b { font-size: 16px; } .pd small { font-size: 10.5px; opacity: .75; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-v { font: 900 18px var(--title); color: #a85d00; } .pd.p1 .pd-v { font-size: 22px; } .pd-v i { font: 700 10px var(--body); font-style: normal; margin-left: 3px; opacity: .7; }
.pd-s { width: 100%; margin-top: 4px; border-radius: 10px 10px 0 0; display: grid; place-items: center; font: 900 26px var(--title); color: rgba(255,255,255,.9); text-shadow: 0 2px 3px rgba(0,0,0,.35); }
.pd.p1 .pd-s { height: 70px; background: linear-gradient(180deg, #ffd96a, #d9a41f); } .pd.p2 .pd-s { height: 48px; background: linear-gradient(180deg, #e8e8e8, #a8a8a8); } .pd.p3 .pd-s { height: 34px; background: linear-gradient(180deg, #e8a866, #b06a2c); }
.pd.me b { color: #c0560a; }
.rk-team { display: inline-flex; } .rk-team img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; object-position: top; border: 2px solid #fff; margin-left: -10px; background: #e9dcb7; } .rk-team img:first-child { margin-left: 0; }
.pd .rk-team img { width: 56px; height: 56px; border-width: 3px; margin-left: -18px; } .pd.p1 .rk-team img { width: 66px; height: 66px; border-color: #f2c94c; }
.rk-emb { display: inline-grid; place-items: center; } .pd .rk-emb .emb2 { transform: scale(1.6); margin: 18px; } .pd.p1 .rk-emb .emb2 { transform: scale(1.9); margin: 26px; }
.rk-list { display: flex; flex-direction: column; gap: 3px; margin-top: 2px; }
.rr { display: flex; gap: 10px; align-items: center; padding: 5px 10px; border-radius: 10px; background: #fbf3dc; border: 1px solid var(--parch-line); } .rr:nth-child(odd) { background: #f6ecd0; } .rr.me { border-color: #e0a030; background: #fff0c8; box-shadow: 0 0 0 2px rgba(224,160,48,.3); }
.rr .rn { width: 28px; text-align: center; font: 900 15px var(--title); opacity: .7; } .rr .rk-f { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; object-position: top; background: #e9dcb7; } .rr .grow { flex: 1; min-width: 0; } .rr .grow b { font-size: 13.5px; } .rr .grow small { display: block; font-size: 11px; opacity: .75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv { font: 900 15px var(--title); color: #a85d00; white-space: nowrap; } .rv i { font: 700 10px var(--body); font-style: normal; opacity: .7; }
.rk-tag { color: #3b78b8; font-size: .85em; } .rk-f { object-fit: cover; object-position: top; background: #e9dcb7; }
.rk-empty { text-align: center; padding: 34px; opacity: .85; } .rk-empty div { font-size: 46px; }
.rk-daily { display: flex; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 16px; background: linear-gradient(110deg, rgba(255,170,60,.35), rgba(255,170,60,.05)); border: 1px solid #e0a030; } .rk-daily .grow small { font: 900 10px var(--body); letter-spacing: 2px; color: #a85d00; } .rk-daily b { display: block; font: 800 20px var(--title); } .rk-daily span { font-size: 12px; opacity: .85; }
.rk-wk { padding: 7px 12px; border-radius: 12px; background: linear-gradient(90deg, rgba(255,90,40,.25), rgba(255,90,40,.04)); border: 1px solid rgba(220,90,40,.5); font-size: 12.5px; }
.rk-cls { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.rc { padding: 10px; border-radius: 14px; background: #fbf3dc; border: 1px solid var(--parch-line); border-top: 4px solid var(--cc); display: flex; flex-direction: column; gap: 5px; } .rc.p1 { box-shadow: 0 0 0 2px rgba(242,201,76,.6); }
.rc-h { display: flex; gap: 8px; align-items: center; } .rc-h img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: top; background: #e9dcb7; border: 2px solid var(--cc); } .rc-h .grow { flex: 1; } .rc-h b { font: 800 15px var(--title); } .rc-h small { display: block; font-size: 11px; opacity: .75; } .rc-m { font-size: 24px; }
.rc-v { display: flex; justify-content: space-between; align-items: baseline; } .rc-v span { font-size: 11px; opacity: .75; } .rc-v b { font: 900 22px var(--title); color: #a85d00; } .rc-t { font-size: 12px; font-weight: 700; } .rc-t small { opacity: .7; font-weight: 400; } .rc-k { font-size: 11px; opacity: .7; }
body.mob .rk-pod { gap: 4px; padding-top: 6px; } body.mob .pd { width: 30%; } body.mob .pd .rk-f { width: 50px; height: 50px; border-width: 3px; } body.mob .pd.p1 .rk-f { width: 60px; height: 60px; } body.mob .pd-s { font-size: 18px; } body.mob .pd.p1 .pd-s { height: 40px; } body.mob .pd.p2 .pd-s { height: 28px; } body.mob .pd.p3 .pd-s { height: 20px; }
body.mob .pd .rk-team img { width: 38px; height: 38px; margin-left: -14px; } body.mob .rz { flex-basis: 92px; } body.mob .rz-i { width: 40px; height: 36px; } body.mob .rz-i img { max-width: 40px; max-height: 36px; } body.mob .rk-cls { grid-template-columns: 1fr 1fr; } body.mob .rk-tabs button { font-size: 12px; padding: 6px 8px; }
.rkwin .win-b > * { flex: none; }
.pd b { white-space: normal; line-height: 1.15; } .pd small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#fps { position: fixed; top: 4px; left: calc(50% + 78px); z-index: 90; pointer-events: none; padding: 1px 7px; border-radius: 6px; background: rgba(0,0,0,.35); color: #b8f5a0; font: 700 10.5px/1.4 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .3px; opacity: .8; }
#fps.mid { color: #ffd76a; } #fps.low { color: #ff8a7a; } #fps.hidden { display: none; }
body.mob #fps { left: calc(50% + 58px); top: 2px; font-size: 9.5px; }
/* ============================================================ in a run: see-through windows that can be moved */
body.inrun .runov { background: transparent !important; pointer-events: none; }
body.inrun .runov > .win, body.inrun .runov > .chestbox { pointer-events: auto; background: rgba(251,245,226,.66) !important; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); box-shadow: 0 12px 34px rgba(0,0,0,.35); }
body.inrun .runov .win-b, body.inrun .runov .lvl-body, body.inrun .runov .lvl-foot, body.inrun .runov .win-f { background: transparent !important; }
body.inrun .draggable { cursor: grab; touch-action: none; } body.inrun .dragging .draggable { cursor: grabbing; } body.inrun .dragging { transition: none !important; opacity: .92; }
body.inrun .runov .draggable::before { content: ''; position: absolute; left: 50%; top: 4px; transform: translateX(-50%); width: 38px; height: 4px; border-radius: 2px; background: rgba(0,0,0,.22); }
body.inrun .runov .win-h, body.inrun .runov .chest-h { position: relative; }
body.inrun .runov .win-h, body.inrun .runov .chest-h { background: rgba(255,245,220,.35) !important; }
body.inrun .runov .card, body.inrun .runov .lvl-side > *, body.inrun .runov .win-b > *, body.inrun .runov .chestbox > :not(.chest-h) { opacity: .86; }
body.inrun .runov .card:hover, body.inrun .runov .win-b > *:hover { opacity: 1; }
.osa-quick { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; } .osa-quick > small { font: 700 11px var(--body); opacity: .75; }
.oq { display: flex; gap: 4px; } .oq-b { flex: 1; display: flex; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 12px; border: 1px solid #e0a030; background: linear-gradient(90deg, rgba(255,200,90,.3), rgba(255,200,90,.06)); cursor: pointer; font: inherit; color: inherit; text-align: left; }
.oq-b:hover { border-color: var(--orange2, #d9631b); } .oq-b img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: top; background: #e9dcb7; } .oq-b span { flex: 1; } .oq-b b { display: block; font: 800 15px var(--title); } .oq-b small { font-size: 11px; opacity: .75; } .oq-b i { font-style: normal; font-size: 24px; opacity: .6; }
.oq-x { width: 34px; border-radius: 10px; border: 1px solid var(--parch-line); background: transparent; cursor: pointer; color: inherit; opacity: .6; } .oq-x:hover { opacity: 1; }
.oq-or { display: flex; align-items: center; gap: 8px; font-size: 11px; opacity: .65; margin-top: 2px; } .oq-or::before, .oq-or::after { content: ''; flex: 1; height: 1px; background: currentColor; opacity: .3; }
/* my character */
.charwin { width: min(760px, calc(96vw / var(--z))); } .ch-grid { display: grid; grid-template-columns: 210px 1fr; gap: 14px; align-items: start; }
.ch-pre { display: flex; flex-direction: column; align-items: center; gap: 4px; border-radius: 16px; background: radial-gradient(ellipse 24% 5% at 50% 88%, rgba(0,0,0,.3), transparent), radial-gradient(circle at 50% 40%, #fff6dc, #e9d6a6); border: 1px solid var(--parch-line); padding-bottom: 6px; } .ch-pre canvas { width: 200px; height: 230px; } .ch-pre b { font: 800 15px var(--title); }
.ch-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .ch-l { display: flex; gap: 8px; align-items: center; justify-content: space-between; font: 800 12px var(--body); } label.ch-l { flex-direction: column; align-items: stretch; } .ch-l input { padding: 8px 10px; border-radius: 10px; border: 1px solid #b9a77c; background: #fffaf0; font: 17px var(--body); }
.ch-cls { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; } .chc { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 3px 0; border-radius: 10px; border: 2px solid transparent; background: #fbf3dc; cursor: pointer; font: inherit; color: inherit; } .chc img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: top; background: #e9dcb7; } .chc small { font: 700 10px var(--body); } .chc.on { border-color: var(--orange2, #d9631b); background: #fff0c8; }
.chs { display: flex; gap: 8px; align-items: center; margin-bottom: 3px; } .chs-n { flex: 0 0 66px; font: 700 11px var(--body); opacity: .8; } .chs-p { display: flex; flex-wrap: wrap; gap: 3px; } .sw { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(0,0,0,.25); cursor: pointer; padding: 0; } .sw.on { outline: 3px solid var(--orange2, #d9631b); outline-offset: 1px; }
.sw.cp { position: relative; display: grid; place-items: center; color: #fff; font: 900 13px var(--body); text-shadow: 0 1px 2px #000; border-style: dashed; } .sw.cp input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
body.mob .ch-grid { grid-template-columns: 150px 1fr; gap: 8px; } body.mob .ch-pre canvas { width: 140px; height: 160px; } body.mob .chc img { width: 30px; height: 30px; } body.mob .chc small { display: none; }
body.inrun .hudmov { touch-action: none; } body.inrun .hudgrab { cursor: grabbing; opacity: .85; outline: 2px dashed rgba(255,220,150,.7); outline-offset: 3px; border-radius: 10px; }
body.inrun .waveplate, body.inrun .hud-tl, body.inrun .hud-dofus, body.inrun #bossbar { pointer-events: auto; }

.ab-orn { margin-top: 8px; } .ab-orn small { display: block; font: 700 11px var(--body); color: #6b4a1d; margin-bottom: 4px; }
.ab-orn > div { display: flex; flex-wrap: wrap; gap: 4px; max-width: 280px; max-height: 170px; overflow-y: auto; }
.ab-orn button { width: 60px; height: 40px; padding: 2px; border-radius: 6px; border: 1px solid rgba(0,0,0,.35); background: rgba(30,18,6,.75); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ab-orn button.lock { filter: grayscale(1) brightness(.55); opacity: .55; }
.ab-orn button.on { outline: 2px solid #ffd76a; outline-offset: 1px; }
.orn-img { display: inline-block; flex: none; } .orn-ph { display: inline-block; height: 30px; }
#o-mkeys { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; } #o-mkeys .mk { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; } #o-mkeys .kbind { min-width: 26px; cursor: pointer; }

#chest-list.multi { display: block; max-height: calc(70vh / var(--z)); overflow-y: auto; }
.crow { margin: 4px 0 8px; } .crow > small { display: block; color: #ffe39a; font-weight: 700; margin-bottom: 3px; }
.crow-t { display: flex; gap: 6px; flex-wrap: wrap; } .ctile.sm { width: 150px; min-height: 0; padding: 6px; font-size: 12px; } .ctile.sm .small { font-size: 11px; }
.ctile.on { outline: 3px solid #ffd76a; outline-offset: 1px; }
.crow-f { display: flex; align-items: center; gap: 10px; margin-top: 6px; position: sticky; bottom: 0; padding: 6px 0; background: rgba(20,12,4,.85); }
.ibatch { margin-top: 10px; border-top: 1px solid rgba(0,0,0,.25); padding-top: 6px; } .ibatch h4 { margin: 0 0 4px; }
.ibrow { display: flex; align-items: center; gap: 6px; padding: 3px 0; } .ibrow .up { color: #3fa34a; } .ibrow .down { color: #c0502c; }
.ibb { font: 700 11px var(--body); padding: 4px 7px; border-radius: 6px; border: 1px solid rgba(0,0,0,.3); background: rgba(255,255,255,.5); cursor: pointer; }
.ibb.on { background: #f0a030; color: #fff; }
.ibf { display: flex; justify-content: flex-end; margin-top: 6px; }

.ultic { flex: none; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 800 20px var(--title, serif); color: #fff; background: radial-gradient(circle at 35% 30%, #7fd6ff, #1f5fa0); box-shadow: 0 0 10px rgba(127,214,255,.7); }

#wiki { z-index: 60; } .wkwin { width: min(1180px, calc(97vw / var(--z))); height: min(860px, calc(94vh / var(--z))); display: flex; flex-direction: column; }
.wkwin .win-h input { margin: 0 10px; padding: 6px 10px; border-radius: 8px; border: 1px solid rgba(0,0,0,.35); font: 600 13px var(--body); width: 200px; }
.wk-main { flex: 1; display: flex; min-height: 0; }
#wk-nav { width: 220px; flex: none; overflow-y: auto; padding: 8px; border-right: 1px solid rgba(0,0,0,.2); }
#wk-nav small { display: block; margin: 10px 4px 4px; font: 800 11px var(--body); text-transform: uppercase; letter-spacing: .06em; color: #a0773a; }
#wk-nav button { display: block; width: 100%; text-align: left; padding: 6px 10px; border: 0; border-radius: 7px; background: transparent; font: 700 13px var(--body); color: inherit; cursor: pointer; }
#wk-nav button:hover { background: rgba(240,160,48,.15); } #wk-nav button.on { background: #f0a030; color: #fff; }
#wk-body { flex: 1; overflow-y: auto; padding: 14px 22px 24px; line-height: 1.5; font-size: 14px; }
#wk-body h2 { margin: 0 0 8px; } #wk-body h3 { margin: 16px 0 6px; color: #a0602a; } #wk-body ul, #wk-body ol { padding-left: 20px; } #wk-body li { margin: 3px 0; }
#wk-body a[data-go] { color: #d07a12; font-weight: 700; cursor: pointer; text-decoration: underline; }
.wk-fig { margin: 10px 0; } .wk-fig img { width: 100%; max-width: 760px; border-radius: 10px; border: 2px solid rgba(0,0,0,.35); cursor: zoom-in; display: block; }
.wk-fig.big img { max-width: none; cursor: zoom-out; } .wk-fig figcaption { font-size: 12px; opacity: .75; margin-top: 3px; font-style: italic; }
.wk-t { border-collapse: collapse; margin: 6px 0 10px; width: 100%; font-size: 13px; } .wk-t th, .wk-t td { border: 1px solid rgba(0,0,0,.2); padding: 5px 8px; text-align: left; vertical-align: top; } .wk-t th { background: rgba(240,160,48,.2); }
.wk-tip, .wk-warn { margin: 10px 0; padding: 8px 12px; border-radius: 8px; font-size: 13px; } .wk-tip { background: rgba(80,170,90,.15); border-left: 4px solid #5aa860; } .wk-warn { background: rgba(230,120,40,.15); border-left: 4px solid #e07a2a; }
.wk-cls { padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,.12); } .wk-cls h3 { margin: 4px 0; } .wk-sp { display: flex; flex-wrap: wrap; gap: 3px; margin: 4px 0; }
.wk-nextp { display: flex; justify-content: space-between; margin-top: 18px; padding-top: 10px; border-top: 1px solid rgba(0,0,0,.15); }
@media (max-width: 760px) { .wk-main { flex-direction: column; } #wk-nav { width: auto; max-height: calc(30vh / var(--z)); border-right: 0; border-bottom: 1px solid rgba(0,0,0,.2); } .wkwin .win-h input { width: 110px; } }

.hub-chat .hc-row { display: flex; gap: 4px; align-items: center; } .hub-chat .hc-row input { flex: 1; min-width: 0; }
.emo-b { flex: none; width: 34px; height: 30px; border-radius: 8px; border: 1px solid rgba(0,0,0,.35); background: rgba(255,255,255,.12); font-size: 17px; cursor: pointer; }
.emo-pop { position: absolute; bottom: 100%; left: 0; margin-bottom: 6px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 6px; background: rgba(28,18,8,.95); border: 1px solid #a0773a; border-radius: 10px; width: 330px; z-index: 30; }
.emo-pop button { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 2px; border: 0; border-radius: 7px; background: rgba(255,255,255,.06); color: #f3e3c0; cursor: pointer; }
.emo-pop button:hover { background: rgba(240,160,48,.35); } .emo-pop button span { font-size: 20px; } .emo-pop button small { font-size: 9px; line-height: 1.1; text-align: center; }

.dhelp .dh { display: block; margin: 8px 0 4px; color: #f3c64e; }
.dtab { width: 100%; border-collapse: collapse; margin: 6px 0; font-size: 12px; }
.dtab th, .dtab td { border: 1px solid rgba(199,154,76,.35); padding: 3px 5px; text-align: center; }
.dtab th { color: #f3c64e; }

.tree { display: flex; flex-direction: column; gap: 6px; }
.tree .trow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px; border-radius: 10px; background: rgba(0,0,0,.06); }
.tree .mtg { min-width: 34px; font-weight: 700; color: #b07a1c; }
.tree .tn { font-size: 11px; opacity: .7; margin-left: auto; }
.tree .mtc { display: inline-flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 78px; height: auto; padding: 3px 3px 5px; border-radius: 9px; background: linear-gradient(160deg, #e9d7a6, #b8955a); box-shadow: 0 2px 5px rgba(0,0,0,.3); color: #3a3024; text-align: center; opacity: .5; }
.tree .mtc.got { opacity: 1; }
.tree .mtc small { font: 700 9.5px var(--body); line-height: 1.1; text-transform: uppercase; color: #6b5a3a; margin-top: 1px; }
.tree .tmut { display: inline-flex; align-items: center; gap: 2px; padding: 4px 8px; border: 1px dashed rgba(176,122,28,.6); border-radius: 10px; }
.tree .tmut i { font-style: normal; font-weight: 700; }
.pill.rxp { background: #5aa8ff !important; color: #10233f !important; text-transform: none; }

.sgauge { display: flex; align-items: center; gap: 8px; margin: 4px 0; font-size: 12px; }
.sgauge span { min-width: 170px; }
.sgauge .bar { flex: 1; height: 8px; border-radius: 4px; background: rgba(0,0,0,.18); overflow: hidden; }
.sgauge .bar i { display: block; height: 100%; background: linear-gradient(90deg, #f3c64e, #e0892c); }
.sell-l { display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow: auto; margin-bottom: 8px; }
.srow { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 8px; background: rgba(0,0,0,.05); }

.hc-tabs { display: inline-flex; gap: 2px; }
.hc-tabs button { font: 11px var(--body); padding: 1px 6px; border-radius: 6px; border: 1px solid rgba(199,154,76,.5); background: rgba(0,0,0,.25); color: #f2e6c8; cursor: pointer; }
.hc-tabs button.on { background: #c79a4c; color: #2b241c; }
.hub-log .ct { font-style: normal; font-size: 10px; padding: 0 4px; border-radius: 4px; margin-right: 3px; }
.hub-log .ct.g { background: #3fa35a; color: #fff; } .hub-log .ct.w { background: #d65fa8; color: #fff; }
.hub-log .cl-g { color: #a8f0b8; } .hub-log .cl-w { color: #ffc0e6; }
.hub-log .cn { cursor: pointer; } .hub-log .cn:hover { text-decoration: underline; }
.hc-to { font-size: 11px; margin: 2px 0; } .hc-to button { background: none; border: 0; color: #f2e6c8; cursor: pointer; }
.hc-menu { position: absolute; left: 8px; bottom: 100%; margin-bottom: 4px; display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: 8px; background: #2b241c; border: 1px solid #c79a4c; z-index: 5; }
.hc-menu button { text-align: left; background: rgba(255,255,255,.06); color: #f2e6c8; border: 0; padding: 3px 8px; border-radius: 6px; cursor: pointer; font: 12px var(--body); }
.hc-menu button:hover { background: rgba(199,154,76,.35); }

.hc-menu.pl { position: fixed; bottom: auto; margin: 0; z-index: 60; }
.hub-hover { position: fixed; z-index: 55; pointer-events: none; padding: 3px 8px; border-radius: 8px; background: rgba(43,36,28,.9); border: 1px solid rgba(199,154,76,.7); color: #f2e6c8; font: 12px var(--body); white-space: nowrap; }
.hub-hover small { opacity: .8; } .hub-hover small.bad { color: #ff8a7a; opacity: 1; }

.pt-panel { position: fixed; left: 12px; top: 120px; width: 430px; max-width: calc(calc(100vw / var(--z)) - 24px); z-index: 40; padding: 8px 10px; border-radius: 12px; background: rgba(43,36,28,.88); border: 1px solid rgba(199,154,76,.7); color: #f2e6c8; font: 12px var(--body); }
.pt-panel.hidden { display: none; }
.pt-h { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; } .pt-h .grow { flex: 1; }
.pt-h button { font: 11px var(--body); padding: 2px 6px; border-radius: 6px; border: 1px solid rgba(199,154,76,.6); background: rgba(0,0,0,.3); color: #f2e6c8; cursor: pointer; }
.pt-h button:hover { background: #c79a4c; color: #2b241c; }
.pt-sum { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; } .pt-sum b { color: #f3c64e; font-size: 14px; }
.pt-l { max-height: 300px; overflow: auto; }
.pt-r { display: grid; grid-template-columns: 24px 1fr 56px 34px 46px 40px 36px 46px 50px; align-items: center; gap: 4px; padding: 2px 0; text-align: right; }
.pt-r .pn { position: relative; text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pt-r .pn i { position: absolute; left: 0; bottom: 0; height: 2px; background: #f3c64e; }
.pt-th { font-size: 10px; opacity: .7; }
.pt-h2 button.off { background: #8a2b1a; border-color: #ff8a6a; }
.pt-spl { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 4px; }
.pt-si { display: flex; align-items: center; gap: 6px; font-size: 11.5px; padding: 2px 4px; border-radius: 6px; } .pt-si span { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pt-si.on { background: rgba(199,154,76,.22); } .pt-si button { font: 11px var(--body); padding: 1px 6px; border-radius: 6px; border: 1px solid rgba(199,154,76,.6); background: rgba(0,0,0,.3); color: #f2e6c8; cursor: pointer; }
@media (max-width: 600px) { .pt-panel { top: 70px; width: auto; right: 12px; font-size: 11px; } .pt-r { grid-template-columns: 22px 1fr 50px 30px 40px 34px; } .pt-r > :nth-child(7), .pt-r > :nth-child(8) { display: none; } }
body.poutch #wave-t, body.poutch #wave-bar { visibility: hidden; }

/* ---- level-up window, vivid dark theme (both themes) */
#cards .win { background: radial-gradient(120% 80% at 50% 0%, #3a2a17, #1e150d 70%); border-color: #c99a2e; }
#cards .win-h h2 { color: #f6d27a; text-shadow: 0 2px 0 #3a250d; letter-spacing: 1px; }
#cards #cards-sub { color: #e9d9b0; }
#cards .card { background: linear-gradient(180deg, #2c2116, #1d150e); border: 2px solid #6b5126; box-shadow: 0 6px 18px rgba(0,0,0,.45); color: #efe2c4; padding: 36px 12px 12px; gap: 7px; transition: transform .12s, box-shadow .12s, border-color .12s; }
#cards .card:hover { transform: translateY(-3px); border-color: #f0c15a; box-shadow: 0 0 0 2px rgba(240,193,90,.35), 0 0 28px rgba(240,180,70,.45); }
#cards .card .num { background: #120d08; color: #f6d27a; border: 1px solid #6b5126; }
#cards .card .help { background: #120d08; color: #e9d9b0; border: 1px solid #6b5126; }
#cards .ctags { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
#cards .ctag { padding: 2px 9px; border-radius: 999px; font: 800 10px var(--body); letter-spacing: .6px; color: #fff; background: #2f5fb3; border: 1px solid rgba(255,255,255,.25); }
#cards .ctag.t-unlock { background: #d06b1c; } #cards .ctag.t-sort { background: #2c8a4a; } #cards .ctag.t-rank { background: #8a5ad0; } #cards .ctag.t-awaken { background: #b8881c; }
#cards .ctag.t-auto { background: #2c8a4a; } #cards .ctag.t-active { background: #5a4a2e; } #cards .ctag.t-passive { background: #2f5fb3; } #cards .ctag.t-curse { background: #8f2a3a; } #cards .ctag.t-heal { background: #2c8a4a; }
#cards .cico { padding: 5px; border-radius: 12px; background: linear-gradient(180deg, #f6d27a, #a8741c); box-shadow: 0 0 16px rgba(246,210,122,.35); }
#cards .cico .ico { width: 64px; height: 64px; border-radius: 8px; display: block; }
#cards .ctitle { font: 700 20px var(--title, var(--body)); color: #f6d27a; text-transform: uppercase; letter-spacing: 1px; text-align: center; text-shadow: 0 2px 0 #000; }
#cards .ctitle::before, #cards .ctitle::after { content: '❖'; font-size: 11px; color: #c99a2e; margin: 0 6px; vertical-align: middle; }
#cards .cdesc { margin: 0; font-size: 13px; color: #e9d9b0; text-align: center; line-height: 1.3; }
#cards .cbox { width: 100%; padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,.35); border: 1px solid #4a3a20; }
#cards .cbox.g { background: linear-gradient(180deg, rgba(30,70,40,.55), rgba(10,30,18,.6)); border-color: #3f8f57; }
#cards .cbox.a { border-color: #c99a2e; } #cards .cbox.r { border-color: #9a4458; background: rgba(80,20,30,.4); }
#cards .cbig { font: 800 19px var(--body); color: #7ee28a; text-align: center; margin-bottom: 4px; }
#cards .cbox.a .cbig { color: #f6d27a; } #cards .cbox.r .cbig { color: #ff9aa8; }
#cards .crow { display: flex; justify-content: space-between; gap: 6px; font-size: 13px; padding: 2px 0; color: #e9d9b0; }
#cards .crow b { color: #fff; } #cards .crow b.up { color: #7ee28a; } #cards .crow small { opacity: .7; }
#cards .cbar { height: 8px; border-radius: 4px; background: rgba(0,0,0,.5); margin-top: 6px; overflow: hidden; }
#cards .cbar i { display: block; height: 100%; background: linear-gradient(90deg, #3fbf5a, #9ef07a); }
#cards .ccap { display: block; text-align: center; font-size: 11px; color: #cdbd96; margin-top: 3px; }
#cards .csub { margin: 0; font-size: 12px; text-align: center; color: #e9d9b0; }
#cards .cnote { width: 100%; display: flex; gap: 6px; align-items: flex-start; padding: 6px 8px; border-radius: 8px; background: rgba(255,255,255,.04); border: 1px solid #3c2f1a; font-size: 11.5px; color: #d8c9a2; text-align: left; }
#cards .cnote i { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1px solid #d8c9a2; display: grid; place-items: center; font: italic 700 10px serif; }
#cards .cbtn { margin-top: auto; width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px; border-radius: 10px; background: linear-gradient(180deg, #3a2a17, #231910); border: 1px solid #8a6a2e; color: #f6e6bf; font: 700 14px var(--body); }
#cards .card:hover .cbtn { background: linear-gradient(180deg, #e0a53a, #a8701c); color: #1d140b; border-color: #f6d27a; }
#cards .cbtn .rad { width: 12px; height: 12px; border-radius: 50%; border: 2px solid currentColor; }
#cards .card .pips i { background: #120d08; border-color: #8a6a2e; } #cards .card .pips i.on { background: #e0a53a; }
#cards .card .cspells small { color: #d8c9a2; } #cards .card .csp { background: rgba(0,0,0,.35); color: #efe2c4; }
#cards .lvl-side .box { background: linear-gradient(180deg, #2c2116, #1d150e); border: 1px solid #6b5126; color: #efe2c4; }
#cards .lvl-side h4 { color: #f6d27a; text-transform: uppercase; letter-spacing: 1px; }
#cards .sbar { display: grid; grid-template-columns: 22px 78px 1fr 58px; align-items: center; gap: 6px; padding: 2px 0; font-size: 12.5px; }
#cards .sbar b { text-align: right; color: #fff; } #cards .sbar .ico { width: 20px !important; height: 20px !important; }
#cards .sb { height: 8px; border-radius: 4px; background: rgba(0,0,0,.5); overflow: hidden; }
#cards .sb i { display: block; height: 100%; background: linear-gradient(90deg, #c9871c, #f6c24a); } #cards .sb i.gr { background: linear-gradient(90deg, #3fbf5a, #9ef07a); }
#cards .lvb { background: #120d08; color: #f6d27a; border: 1px solid #8a6a2e; }

.ast-rules { margin: 4px 0 6px 16px; padding: 0; font-size: 11.5px; line-height: 1.35; }
.ast-sel { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.ast-sel select { font: 12px var(--body); padding: 3px; border-radius: 6px; }
body:has(.overlay:not(.hidden):not(.screen.hidden .overlay)) .pt-panel { opacity: .12; pointer-events: none; }
.stb-h { display: flex; align-items: center; justify-content: space-between; margin: 8px 0 4px; }
.stb-d.fresh { box-shadow: inset 3px 0 0 #f3c64e; }

/* padlocks of the movable windows and HUD pieces, and the on-screen joystick */
.dlock { border: 0; background: rgba(20,14,8,.7); color: #f6d27a; border-radius: 8px; font-size: 12px; line-height: 1; padding: 3px 4px; cursor: pointer; flex: none; }
.dlock.inwin { margin-left: 6px; }
.dlock.inhud { position: absolute; top: -8px; right: -8px; z-index: 3; font-size: 10px; padding: 2px 3px; display: none; }
body.mob.inrun .dlock.inhud, #vjoy .dlock.inhud { display: block; }
body:not(.mob) .dlock.inhud { display: none !important; }
.hudmov:not(#vjoy) { } .hudmov.locked { touch-action: auto; }
body:not(.mob) .mob-only { display: none !important; }
.vjoy { position: fixed; left: 78px; bottom: 58px; width: 120px; height: 120px; z-index: 30; touch-action: none; }
.vjoy.hidden { display: none; }
.vjoy .jb { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(246,210,122,.18), rgba(20,14,8,.45)); border: 2px solid rgba(246,210,122,.55); }
.vjoy .jk { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f6d27a, #a8741c); box-shadow: 0 2px 8px rgba(0,0,0,.5); pointer-events: none; }
.vjoy:not(.locked) .jb { border-style: dashed; }

/* merchant forgemagic on phones: two columns that each scroll (worn pieces first, then the runes; the lines of the
   chosen piece on the right), compact lines */
body.mob .fgcols { grid-template-columns: minmax(180px, 32%) 1fr; gap: 10px; }
body.mob .fgl { display: flex; flex-direction: column; } body.mob .fgpw { order: -1; }
body.mob .fgl, body.mob .fgr2 { max-height: calc((calc(100vh / var(--z)) - 128px) / .82); overflow-y: auto; -webkit-overflow-scrolling: touch; padding-right: 2px; }
body.mob .fglist { max-height: none; overflow: visible; }
body.mob .fgp { padding: 6px; } body.mob .fgp b { font-size: 13px; }
body.mob .fgrunes { grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 4px; }
body.mob .fgr { padding: 2px; } body.mob .fgr small { font-size: 8px; }
body.mob .fghead { margin-bottom: 4px; } body.mob .fghead b { font-size: 15px; }
body.mob .fgline { grid-template-columns: 1fr 58px 40px 58px 26px 90px 48px; gap: 6px; padding: 6px; font-size: 12px; }
body.mob .fgline .btn { min-height: 40px; padding: 0 8px; }
body.mob .fgcols h4 { margin: 4px 0; }

/* enclos filter chips (dragoturkeys) */
.el-filter { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 8px; }
.el-filter .fchip { border: 1px solid var(--parch-line); background: #fff8e4; color: #6a5a3a; border-radius: 999px; font: 700 11px var(--body); padding: 4px 10px; cursor: pointer; white-space: nowrap; }
.el-filter .fchip.on { background: var(--orange); color: #fff; border-color: var(--orange); }
.el-filter .fchip.clr { background: #f3e4d6; color: #a2321f; }
.meadow .din.dim { opacity: .22; filter: grayscale(.85); }

/* guild perks: with many ranks (up to 10 pips) the rank row couldn't shrink, so the "Améliorer" button overlapped the
   text — let the text column shrink, wrap the pips, and keep the action at its natural size on the right */
.g2 .perk .grow { min-width: 0; }
.g2 .perk .pips { flex-wrap: wrap; row-gap: 4px; }
.g2 .perk > .btn, .g2 .perk > .pill, .g2 .perk > .why { flex: none; margin-left: 4px; }
body.mob .g2 .perk { flex-wrap: wrap; } body.mob .g2 .perk > .btn, body.mob .g2 .perk > .pill, body.mob .g2 .perk > .why { margin-left: 54px; margin-top: 4px; }

/* familier bonus pets: the real bonus at the current level + per-level gain */
.am-bgain { margin-top: 5px; padding-top: 5px; border-top: 1px dashed var(--parch-line); font-size: 11.5px; color: #3f7a2e; }
.am-bgain .muted { color: #8b7a55; }

/* ---- staff panel (admin.js) */
.adm-chip { background: linear-gradient(180deg, #8a2b1a, #5a160c) !important; color: #ffe2b8 !important; border-color: #ff9a6a !important; font-weight: 700; cursor: pointer; }
#admwin .win.adm { width: min(1180px, calc(97vw / var(--z))); max-height: calc(94vh / var(--z)); display: flex; flex-direction: column; }
#admwin .win-b { overflow: auto; flex: 1; }
.adm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 10px; }
.adm-card { padding: 10px 12px; border-radius: 10px; background: rgba(0,0,0,.06); border: 1px solid var(--parch-line); display: flex; flex-direction: column; gap: 2px; }
.adm-card small { font: 700 11px var(--body); letter-spacing: 1px; text-transform: uppercase; opacity: .7; } .adm-card b { font: 800 22px var(--title, Georgia); } .adm-card span { font-size: 12px; opacity: .75; }
.adm-box { padding: 10px 12px; margin: 0 0 10px; border-radius: 10px; background: rgba(0,0,0,.05); border: 1px solid var(--parch-line); }
.adm-box h4 { margin: 0 0 8px; }
.adm-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 4px 0; } .adm-row input:not([type=checkbox]), .adm-row select { padding: 5px 8px; border-radius: 8px; border: 1px solid #b89a63; font: 13px var(--body); }
.adm-row input:not([type=checkbox]):not([type=number]) { flex: 1; min-width: 180px; } .adm-row input[type=number] { width: 150px; } .adm-row label:first-child { min-width: 110px; font-size: 13px; }
.adm-btns { margin-top: 8px; }
.adm-t { width: 100%; border-collapse: collapse; font-size: 13px; } .adm-t th { text-align: left; font-size: 11px; opacity: .7; padding: 4px 6px; border-bottom: 1px solid var(--parch-line); } .adm-t td { padding: 5px 6px; border-bottom: 1px dashed var(--parch-line); vertical-align: middle; }
.adm-t tr.adm-click { cursor: pointer; } .adm-t tr.adm-click:hover td { background: rgba(199,154,76,.15); }
.adm-kv { width: 100%; font-size: 13px; } .adm-kv td { padding: 2px 4px; } .adm-kv td:first-child { opacity: .75; }
.adm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; } .adm-grid .adm-box { margin: 0 0 10px; }
.adm-head h3 { margin: 8px 0 2px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.adm-role { font: 800 10px var(--body); letter-spacing: 1px; text-transform: uppercase; padding: 1px 7px; border-radius: 999px; background: #2f6ab8; color: #fff; } .adm-role.admin { background: #b8402e; }
.adm-tag { font: 700 10px var(--body); padding: 1px 6px; border-radius: 6px; margin-left: 3px; color: #fff; } .adm-tag.ban { background: #8a1f14; } .adm-tag.mute { background: #8a6a14; }
.adm-on { color: #3fcf5a; margin-right: 3px; }
.adm-alert { padding: 8px 12px; border-radius: 8px; margin: 6px 0; font-weight: 700; } .adm-alert.ban { background: rgba(184,30,20,.18); border: 1px solid #b8402e; } .adm-alert.mute { background: rgba(184,140,20,.18); border: 1px solid #b8902e; }
.adm-line { font-size: 13px; padding: 3px 0; border-bottom: 1px dashed var(--parch-line); word-break: break-word; }
.btn.red { background: linear-gradient(180deg, #d0503a, #8a1f14); color: #fff; border-color: #5a160c; }
.adm-block { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: rgba(10,6,3,.92); color: #f2e6c8; text-align: center; padding: 20px; }
.adm-block > div { max-width: 520px; padding: 26px 30px; border-radius: 16px; border: 2px solid #b8402e; background: #2b1d12; } .adm-block h2 { margin: 0 0 10px; color: #ff9a6a; } .adm-block p { line-height: 1.5; }
.adm-ann { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 9000; max-width: min(720px, calc(92vw / var(--z))); padding: 12px 40px 12px 16px; border-radius: 12px; background: rgba(43,29,18,.96); border: 2px solid #d6a84c; color: #fff1d2; box-shadow: 0 8px 26px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 4px; font: 14px var(--body); }
.adm-ann b { color: #ffd24a; } .adm-ann.warn { border-color: #ff7a5a; } .adm-ann.warn b { color: #ff9a6a; } .adm-ann i { position: absolute; right: 12px; top: 10px; cursor: pointer; font-style: normal; opacity: .7; }
.adm-line a, .adm-t a { color: #c8862a; font-weight: 700; text-decoration: none; } .adm-line a:hover, .adm-t a:hover { text-decoration: underline; }
.adm-block .adm-staff { display: block; margin-top: 14px; color: #c9b48a; } .adm-block .adm-retry { margin: 6px 0 10px; opacity: .75; }
.adm-box.adm-maint-on { border-color: #e8a83a; background: rgba(232,168,58,.12); }
#adm-chip.maint { background: #b8402e; color: #fff; }
.adm-block .adm-mtmsg { font-weight: bold; color: #ffd24a; }

/* Poutch: the counter moves right of the Caractéristiques panel when it is open; the spells of the class are a second panel beside it */
body:has(#statpanel:not(.closed)) .pt-panel { left: 252px; }
.pt-panel.pt-sp { left: 454px; width: 360px; max-height: calc(70vh / var(--z)); overflow: auto; margin: 0; }
body:has(#statpanel:not(.closed)) .pt-panel.pt-sp { left: 694px; }
.pt-panel.pt-sp.hidden { display: none; }
@media (max-width: 900px) { .pt-panel.pt-sp, body:has(#statpanel:not(.closed)) .pt-panel.pt-sp { left: auto; right: 12px; top: 120px; } }

/* the actions of a room (leave, ready, launch) stay pinned at the bottom of its window */
.team-act { position: sticky; bottom: -14px; z-index: 2; display: flex; gap: 8px; align-items: center; margin: 12px -16px -14px; padding: 10px 16px 14px; background: var(--parch); border-top: 1px solid rgba(199,154,76,.35); }
body.mob .team-act { bottom: -8px; margin: 10px -12px -8px; padding: 8px 12px; }
.ap-pre { position: relative; }
.ap-rot { position: absolute; bottom: 8px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(199,154,76,.7); background: rgba(43,36,28,.75); color: #f2e6c8; font-size: 17px; line-height: 1; cursor: pointer; padding: 0; }
.ap-rot.l { left: 8px; } .ap-rot.r { right: 8px; } .ap-rot:hover { background: #c79a4c; color: #2b241c; }

/* Poutch: the spells owned (rank max, awakening, pause), paused spells dimmed on the bar */
.pt-sol { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 8px; }
.pt-so { display: flex; align-items: center; gap: 6px; padding: 3px 4px; border-radius: 6px; background: rgba(199,154,76,.14); font-size: 11.5px; }
.pt-so.off { opacity: .55; } .pt-so .grow { flex: 1; min-width: 0; } .pt-so .grow b, .pt-so .grow small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pt-so button, .pt-so select { font: 11px var(--body); padding: 1px 6px; border-radius: 6px; border: 1px solid rgba(199,154,76,.6); background: rgba(0,0,0,.3); color: #f2e6c8; cursor: pointer; max-width: 120px; }
.pt-so button:disabled { opacity: .4; cursor: default; }
.pt-sh { margin: 6px 0 2px; font: 700 11px var(--body); text-transform: uppercase; letter-spacing: 1px; opacity: .8; }
.pt-panel.pt-sp { width: 460px; }
.slot.paused { filter: grayscale(1) brightness(.6); }

/* a temporary state of the hero (Momification…) written small above the spell bar */
.hero-state { position: absolute; left: 50%; top: -22px; transform: translateX(-50%); padding: 2px 10px; border-radius: 9px; background: rgba(43,36,28,.85); border: 1px solid #c79a4c; color: #f3e2b0; font: 700 11px var(--body); letter-spacing: .5px; white-space: nowrap; pointer-events: none; animation: hstate 1.2s ease-in-out infinite alternate; }
.hero-state.hidden { display: none; }
@keyframes hstate { from { box-shadow: 0 0 0 rgba(243,198,78,0); } to { box-shadow: 0 0 10px rgba(243,198,78,.6); } }

/* Dragodex: the bonuses of each breed under its picture; centre popup cards (Dofus won, birth) */
.dexc .dexs { display: block; font: 600 9.5px/1.25 var(--body); font-style: normal; color: #c9b48a; margin-top: 2px; }
.popcard { position: fixed; left: 50%; top: 34%; transform: translate(-50%, -50%); z-index: 9000; display: flex; align-items: center; gap: 14px; padding: 14px 22px 14px 14px; border-radius: 16px; background: rgba(43,36,28,.95); border: 2px solid #c79a4c; box-shadow: 0 10px 40px rgba(0,0,0,.55); color: #f2e6c8; cursor: pointer; animation: popin .35s cubic-bezier(.2,1.4,.4,1); max-width: min(440px, calc(90vw / var(--z))); }
.popcard.out { opacity: 0; transform: translate(-50%, -60%); transition: .3s; }
.popcard .pc-i { min-width: 64px; display: grid; place-items: center; } .popcard .pc-t b { display: block; font: 900 18px var(--title); } .popcard .pc-t small { display: block; margin-top: 3px; opacity: .85; }
@keyframes popin { from { opacity: 0; transform: translate(-50%, -40%) scale(.8); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

/* the ultimate orb in automatic */
#wakfu.auto::after { content: 'AUTO'; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); font: 800 9px var(--body); padding: 1px 5px; border-radius: 6px; background: #2a8a5a; color: #fff; letter-spacing: .5px; }

.irule { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 8px; background: rgba(0,0,0,.06); margin: 3px 0; } .irule .grow { flex: 1; }
/* joysticks: almost invisible, a thin translucent white outline (request 01/11) */
.joy { border: 1px solid rgba(255,255,255,.28) !important; background: transparent !important; }
.joy i { width: 40px; height: 40px; margin: -20px 0 0 -20px; background: transparent !important; border: 1px solid rgba(255,255,255,.4); }
.vjoy .jb { background: transparent !important; border: 1px solid rgba(255,255,255,.25) !important; }
.vjoy .jk { width: 40px; height: 40px; margin: -20px 0 0 -20px; background: transparent !important; border: 1px solid rgba(255,255,255,.4); box-shadow: none !important; }
.vjoy:not(.locked) .jb { border-style: dashed !important; }

/* phones (01/11): readable texts, the four level-up cards side by side without shrinking them */
body.mob #cards .card .cico { transform: scale(.72); margin: -8px 0; } body.mob #cards .card .ctitle { font-size: 13px; line-height: 1.15; margin: 0; }
body.mob #cards .card .cdesc { font-size: 11px; line-height: 1.25; margin: 0; } body.mob #cards .card .cbox { padding: 5px 6px; font-size: 11px; }
body.mob #cards .card .cbig { font-size: 13px; } body.mob #cards .card .crow { font-size: 10.5px; padding: 1px 0; } body.mob #cards .card .cnote, body.mob #cards .card .cspells { display: none; }
body.mob #cards .card .ctags .ctag { font-size: 8.5px; padding: 1px 5px; } body.mob #cards .card .cbtn { display: none; } body.mob #cards .card .pips { margin: 0; }
body.mob .lvl-win { width: calc(calc(100vw / var(--z)) - 12px) !important; max-height: calc(calc(100dvh / var(--z)) - 8px) !important; } body.mob .lvl-body { padding: 6px; }
body.mob .lvl-foot { padding: 4px 8px; } body.mob .lvl-foot .btn { padding: 5px 12px; font-size: 13px; }
body.mob .win { font-size: 13px; } body.mob .win .small, body.mob .win small { font-size: 11.5px; } body.mob .win p { line-height: 1.35; }
body.mob .tooltip, body.mob #tip { font-size: 12.5px !important; max-width: min(320px, calc(80vw / var(--z))) !important; }
.stb-sheet { margin: -2px 0 8px 40px; padding: 8px 10px; border-radius: 10px; } .stb-d .btn.on { border-color: #f0c15a; box-shadow: 0 0 0 1px #f0c15a inset; }
#cards .cbig .cbcap { font-size: .62em; opacity: .75; } #cards .creal { display: block; text-align: center; color: #f0c15a; font-size: 11px; margin: -2px 0 4px; } #cards .crow.ctot { border-top: 1px dashed rgba(255,255,255,.15); margin-top: 4px; padding-top: 4px; }
.pz-dofus { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; } .pzd { display: flex; gap: 8px; align-items: center; padding: 4px 8px; border: 1px solid; border-radius: 10px; background: rgba(0,0,0,.18); } .pzd small { display: block; font-size: 11px; opacity: .85; } .pzd.new { box-shadow: 0 0 0 1px #f0c15a inset, 0 0 10px rgba(240,193,90,.35); } .pzd.dup { opacity: .6; }
/* the Dofus announcement stays visible over every menu, without catching the clicks meant for it (02/11) */
.popcard { top: 16%; pointer-events: none; z-index: 9500; }
.ab-jet { font-size: 12px; font-weight: 700; margin: 2px 0 3px; }
/* in-run interface options (02/11): opacity, spell bar size, Dofus column */
#hud .banner, #hud .waveplate, #hud .hud-tl, #hud .hud-dofus, #hud .statpanel, #hud #mates { opacity: var(--ui-op, 1); }   /* not the minimap (02/11: unreadable when transparent) */
#hud .banner { scale: var(--bar-k, .9); transform-origin: 50% 100%; }
body.no-dofhud #hud .hud-dofus { display: none !important; }
.slocks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; } .slock { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 700; padding: 5px 7px; border-radius: 8px; background: rgba(0,0,0,.08); } .slock.on { box-shadow: 0 0 0 1px #f0c15a inset; } .slock select { font-size: 12px; }
.ap-cols { margin-top: 8px; padding: 8px; border-radius: 10px; background: rgba(0,0,0,.12); font-size: 12px; } .apc-row { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; margin-top: 4px; } .apc-row > span { width: 14px; font-weight: 800; } .ap-cols .sw { width: 11px; height: 11px; border-radius: 4px; border: 1px solid rgba(0,0,0,.35); padding: 0; } .ap-cols .sw.on { outline: 2px solid #f0c15a; } .apc-act { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; } .apc-act .btn { flex: 1 1 auto; padding: 4px 6px; font-size: 11px; } .apc-row { gap: 2px !important; }
.gpu-warn { position: fixed; left: 50%; top: 12px; transform: translateX(-50%); z-index: 9400; max-width: min(640px, calc(94vw / var(--z))); display: flex; flex-direction: column; gap: 6px; padding: 12px 16px; border-radius: 12px; background: rgba(60,22,12,.96); border: 2px solid #e0702e; color: #fff1d2; font-size: 13px; box-shadow: 0 8px 30px rgba(0,0,0,.5); } .gpu-warn b { font-size: 15px; color: #ffb36b; } .gpu-warn .btn { align-self: flex-end; }

/* pause menu (03/11): two wide columns, spells on two columns, characteristics as gauges, loot and records tabs */
.pz-cols.run2 { grid-template-columns: 1.1fr 1fr; } .pz-cols.loot2 { grid-template-columns: 1fr 1fr; }
.pz-cols.run2 .pzbox, .pz-cols.loot2 .pzbox { font-size: 14px; }
.pz-spellbox { display: flex; flex-direction: column; }
.pz-spells { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pz-spells .pzsp { margin: 0; align-items: center; }
.pz-spells .pzsp b { font-size: 15px; }
.pzsp .ell2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; }
.pzsp-c { display: flex; flex-direction: column; align-items: center; gap: 3px; } .pzsp-c span { display: flex; gap: 2px; }
.pz-gauges { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pzg { display: grid; grid-template-columns: 30px 1fr auto; grid-template-rows: auto 8px; column-gap: 8px; row-gap: 4px; align-items: center; padding: 6px 9px; border-radius: 10px; background: #fffaf0; border: 1px solid var(--parch-line); font-size: 13px; }
.pzg .ico { grid-row: span 2; } .pzg-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pzg-v { font: 800 15px var(--body); white-space: nowrap; } .pzg-v small { font-weight: 600; color: #8b7a5a; font-size: 11px; }
.pzg-bar { grid-column: 2 / 4; height: 7px; border-radius: 4px; background: #e6dcc2; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.15); }
.pzg-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #6cc04a, #a4d65e); transition: width .3s; }
.pzg-bar i.mid { background: linear-gradient(90deg, #e6a23c, #f2c94c); } .pzg-bar i.full { background: linear-gradient(90deg, #d9534f, #ff7a59); }
.pzg-bar.none { background: transparent; box-shadow: none; } .pzg.hp .pzg-bar i { background: linear-gradient(90deg, #c83a3a, #ff7a6b); }
.pz-sub { margin: 12px 0 6px; font: 700 14px var(--title); display: flex; align-items: center; gap: 6px; } .pz-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.pz-dds { display: flex; flex-wrap: wrap; gap: 8px; }
.pz-dd { position: relative; width: 92px; padding: 4px 4px 6px; border-radius: 10px; background: #fffaf0; border: 1px solid var(--parch-line); text-align: center; font-size: 11px; }
.pz-dd .dsp { display: flex; height: 66px; align-items: flex-end; justify-content: center; } .pz-dd b { position: absolute; top: 4px; right: 7px; font: 800 15px var(--body); color: #7a4f12; } .pz-dd small { display: block; line-height: 1.15; }
.pz-bag { display: flex; flex-wrap: wrap; gap: 6px; }
.pz-rk { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 4px 2px; }
.pz-rk-f { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .pz-rk-f label { font-weight: 700; display: flex; gap: 6px; align-items: center; }
.pz-rk-f select { padding: 5px 8px; border-radius: 8px; border: 1px solid #c7a76a; background: #fffaf0; font: 700 13px var(--body); }
.pz-rk-cls button { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px 4px 4px; } .pz-rk-cls img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; object-position: top; }
.pz-rk .rk-list { flex: 1; min-height: 0; overflow: auto; }
@media (max-width: 900px) { .pz-spells, .pz-gauges { grid-template-columns: 1fr; } .pz-cols.run2, .pz-cols.loot2 { grid-template-columns: 1fr; } }
/* village equipment: several pieces broken at once (03/11) */
.vbbar { display: flex; align-items: center; gap: 8px; margin: 4px 0 6px; padding: 5px 8px; border-radius: 10px; background: rgba(0,0,0,.06); }
.vbbar label { display: flex; align-items: center; gap: 5px; font-weight: 700; cursor: pointer; }
.vitem .vbsel { display: flex; align-items: center; padding: 0 2px; cursor: pointer; } .vitem .vbsel input { width: 17px; height: 17px; cursor: pointer; }

/* dragoturkey storage on two columns (03/11) */
.stbl { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; max-height: calc(52vh / var(--z)); overflow: auto; align-content: start; }
.stbl .stb-d { flex-wrap: wrap; row-gap: 4px; } .stbl .stb-d .grow { min-width: 150px; } .stbl .stb-sheet { grid-column: 1 / -1; margin-left: 0; }
@media (max-width: 900px) { .stbl { grid-template-columns: 1fr; } }
.jbonus { margin: 4px 0 0; } .jbonus b { color: #3d7a1f; }
.candy { display: flex; gap: 8px; align-items: center; padding: 5px 8px; border-radius: 10px; border: 1px solid var(--parch-line); margin: 4px 0; } .candy.on { border-color: #e0a030; box-shadow: inset 0 0 0 1px rgba(224,160,48,.35); }
.hq-tog { position: fixed; right: 16px; bottom: 96px; z-index: 30; } .hq-tog.on { background: #f0b445; color: #2b1d0e; border-color: #c9862a; } .hq-tog b { font-weight: 800; }
.candy .grow { flex: 1; min-width: 0; }
/* inscription Osatopia dans Horde (osareg) */
#osa-rf { display: flex; flex-direction: column; gap: 10px; } #osa-rf label { display: flex; flex-direction: column; gap: 4px; font: 700 13px var(--body); color: #5a3a12; }
#osa-rf input { padding: 9px 10px; border-radius: 8px; border: 1px solid #c79a4c; background: #fffaf0; font: 15px var(--body); }
#osa-rf .btn { align-self: stretch; justify-content: center; }
#osa-rf label.chk { flex-direction: row; gap: 8px; align-items: flex-start; font-weight: 600; line-height: 1.3; cursor: pointer; }
#osa-rf label.chk input { width: 16px; height: 16px; padding: 0; margin-top: 1px; flex: none; }
#osa-rf .hint { font-size: 11px; opacity: .65; margin-top: -6px; }
#osa-rf p { margin: 0; }
/* VIP Horde (03/11) */
#v-tabs .vip-tab { color: #ffd76a; font-weight: 800; }
#v-tabs .vip-tab.on { background: linear-gradient(180deg, #f5c445, #b9801c); color: #2a1a05; }
.side-col .vip-side { background: radial-gradient(circle at 40% 35%, #ffe08a, #b07a16); border-color: #ffd76a; }
.side-col .vip-side .vip-ic { font: 900 12px/1 var(--title); font-style: normal; color: #2a1a05; letter-spacing: .5px; }
.vip { display: flex; flex-direction: column; gap: 14px; max-width: 880px; margin: 0 auto; }
.vip-hero { display: flex; gap: 16px; align-items: center; padding: 16px 18px; border-radius: 14px; background: linear-gradient(120deg, #3a2a10, #5b4114 60%, #3a2a10); border: 1px solid #c79a4c; }
.vip-hero.on { background: linear-gradient(120deg, #4b360c, #8a6413 55%, #4b360c); border-color: #ffd76a; box-shadow: 0 0 24px rgba(255,200,80,.25) inset; }
.vip-hero h3 { margin: 0 0 4px; color: #ffe08a; font-size: 22px; }
.vip-hero p { margin: 2px 0; color: #f3e3bd; }
.vip-crown { flex: none; width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; font: 900 22px/1 var(--title); color: #2a1a05; background: radial-gradient(circle at 35% 30%, #fff1b8, #f0b62e 55%, #a8700f); border: 3px solid #ffe7a0; box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.vip-bon { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.vip-bon .vb { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: rgba(0,0,0,.18); border: 1px solid rgba(199,154,76,.45); }
.vip-bon .vb i { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-style: normal; font-size: 16px; color: #2a1a05; background: linear-gradient(180deg, #ffd76a, #c88f1f); }
.vip-bon .vb b { display: block; color: #ffd76a; }
.vip-bon .vb small { display: block; opacity: .85; line-height: 1.3; }
.vip-offers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vip-offer { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 10px 12px; border-radius: 12px; cursor: pointer; border: 2px solid #c79a4c; background: linear-gradient(180deg, #4a3a22, #2e2416); color: #f3e3bd; font: inherit; }
.vip-offer:hover { filter: brightness(1.15); }
.vip-offer.best { border-color: #ffd76a; background: linear-gradient(180deg, #6a4d14, #3a2a0c); }
.vip-offer b { font: 800 18px var(--title); color: #ffe08a; }
.vip-offer .pr { font: 900 28px var(--title); color: #fff; }
.vip-offer small { margin-top: 4px; padding: 4px 14px; border-radius: 99px; background: linear-gradient(180deg, #f39a3a, #c8611a); color: #fff; font-weight: 800; }
.vip-offer em { position: absolute; top: -10px; padding: 2px 10px; border-radius: 99px; background: #ffd76a; color: #2a1a05; font: 800 11px var(--body); font-style: normal; }
.vip-note { margin: 0; text-align: center; }
.vip-f { display: flex; justify-content: center; }
.vip-link { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vip-res { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.vip-res.on b { color: #ffd76a; }
body.mob .vip-bon { grid-template-columns: 1fr; }
body.mob .vip-hero { padding: 10px 12px; } body.mob .vip-crown { width: 52px; height: 52px; font-size: 16px; }
body.mob .vip-offer .pr { font-size: 22px; }
/* installation de la web app (téléphones) */
.pwa-pop { z-index: 9000; }
.pwa-win { width: min(440px, calc(calc(100vw / var(--z)) - 24px)); max-height: calc(calc(100vh / var(--z)) - 24px); display: flex; flex-direction: column; }
.pwa-win .win-b { overflow: auto; }
.pwa-top { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.pwa-top img { width: 56px; height: 56px; border-radius: 12px; flex: none; }
.pwa-top p { margin: 0; }
.pwa-go { width: 100%; justify-content: center; }
.pwa-or { text-align: center; margin: 8px 0 2px; }
.pwa-steps { margin: 6px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.pwa-ic { display: inline-block; padding: 0 6px; border-radius: 6px; border: 1px solid currentColor; font-size: 13px; }
.pwa-win .win-f { display: flex; gap: 8px; justify-content: flex-end; }
.vip-res .vp { padding: 1px 8px; border-radius: 99px; background: rgba(255,215,106,.12); border: 1px solid rgba(255,215,106,.35); color: #ffe08a; font-weight: 700; }
.vip-chip { gap: 6px; border-color: #ffd76a !important; background: linear-gradient(180deg, #5b4114, #3a2a10) !important; color: #ffe08a !important; cursor: pointer; }
.vip-chip .vip-c { padding: 1px 6px; border-radius: 6px; background: linear-gradient(180deg, #ffe08a, #d39a22); color: #2a1a05; font: 900 11px var(--title); }
.vip-chip.on { background: linear-gradient(180deg, #8a6413, #4b360c) !important; box-shadow: 0 0 10px rgba(255,200,80,.35); }
#prof-tabs .vip-tab { color: #ffd76a; font-weight: 800; }
body.mob .vip-chip #vip-lbl { display: none; }
/* artisanat : ce que donne la pièce fabriquée */
.craftinfo { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 3px; font-size: 11.5px; }
.craftinfo .cs { color: #e9dcb8; } .craftinfo .cs b { color: #9fd47a; font-weight: 700; }
.craftinfo .cs.sub { color: #bfae88; } .craftinfo .cs.wk { color: #ffd76a; }

/* Livre des records */
.recwin { width: min(1100px, calc(96vw / var(--z))); max-height: calc(92vh / var(--z)); display: flex; flex-direction: column; }
.recwin .win-b { overflow: auto; }
.recwin h4 { margin: 14px 0 6px; color: #ffd76a; }
.rec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.rec-grid .rec { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 8px; background: rgba(0,0,0,.18); border: 1px solid rgba(199,154,76,.35); }
.rec-t { width: 100%; border-collapse: collapse; font-size: 13px; }
.rec-t th, .rec-t td { padding: 5px 8px; border-bottom: 1px solid rgba(199,154,76,.25); text-align: left; vertical-align: top; }
.rec-t th { color: #e9c98a; font-weight: 700; }
.rec-res b { color: #ffd76a; }
/* pause menu: automatic upgrades switch (04/11) */
.pz-auto { display: inline-flex; align-items: center; gap: 6px; margin-left: 12px; font: 700 13px var(--body); color: var(--ink, #f4e4bd); cursor: pointer; white-space: nowrap; }
.pz-auto input { width: 18px; height: 18px; accent-color: #e98a2c; }
/* phones (04/11): information messages, banners and the boss card small at the bottom left, beside the spell bar,
   instead of the middle of the screen */
body.mob .toasts { top: auto; left: 8px; bottom: 10px; transform: none; align-items: flex-start; width: min(calc(27vw / var(--z)), 230px); gap: 4px; z-index: 6; }
body.mob .toast { padding: 4px 9px; border-radius: 9px; font: 700 10.5px/1.25 var(--body); text-align: left; max-width: 100%; box-shadow: 0 2px 6px rgba(0,0,0,.45); }
body.mob .toast.big { font-size: 11px; }
body.mob .toast.bossmini { display: flex; align-items: center; gap: 7px; padding: 4px 10px 4px 4px; background: linear-gradient(90deg, rgba(43,36,28,.95), rgba(90,20,12,.92)); border-color: #c0392b; }
body.mob .toast.bossmini img, body.mob .toast.bossmini canvas { width: 36px !important; height: 36px !important; object-fit: contain; flex: none; }
body.mob .toast.bossmini small { display: block; font: 800 8px var(--body); letter-spacing: 2px; color: var(--orange); }
body.mob .toast.bossmini b { display: block; font: 900 12px var(--title); color: #ffdf8a; }
body.mob .centerbanner, body.mob .boss-intro { display: none !important; }
body.mob .popcard { left: 8px; top: auto; bottom: 48%; transform: scale(.72); transform-origin: left bottom; max-width: calc(44vw / var(--z)); }
body.mob .popcard.out { transform: scale(.72) translateY(-10%); }
body.mob.portrait .toasts { bottom: 92px; width: min(calc(62vw / var(--z)), 260px); }
body.mob.portrait .popcard { bottom: 52%; max-width: calc(80vw / var(--z)); }
/* phones (04/11): the team window (solo, friends, join, waiting room) fits under the step bar, its content scrolls and
   the Ready / Launch buttons stay at the bottom, reachable (they were below the screen) */
body.mob #st-team { inset: 42px 0 0 0; }
body.mob .team-win { top: 2px !important; max-height: calc(100% - 6px) !important; display: flex; flex-direction: column; }
body.mob .team-win .win-h { flex: none; padding-top: 6px; padding-bottom: 6px; }
body.mob .team-win .win-b { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* floating joystick (04/11): drawn where the finger lands, never catches the touches itself */
.vjoy.float { pointer-events: none; animation: vjIn .12s ease-out; }
.vjoy.float .dlock { display: none !important; }
@keyframes vjIn { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
.vjoy.float .jb { background: radial-gradient(circle, rgba(255,255,255,.06), rgba(0,0,0,.22)) !important; border: 2px solid rgba(255,255,255,.5) !important; }
.vjoy.float .jk { background: radial-gradient(circle at 35% 30%, rgba(255,240,200,.75), rgba(200,150,60,.55)) !important; border: 2px solid rgba(255,255,255,.75) !important; }
/* spell bar: automatic upgrades switch (04/11) */
.bn-left { position: relative; }
.bn-auto { position: absolute; top: -21px; left: 6px; z-index: 3; padding: 2px 9px; border-radius: 8px 8px 0 0; border: 1px solid #8d6a2e; border-bottom: none; background: rgba(43,36,28,.92); color: #cdbb93; font: 800 11px var(--body); letter-spacing: .04em; cursor: pointer; pointer-events: auto; }
.bn-auto.on { background: linear-gradient(180deg, #ffcf6a, #e3952e); color: #3a2208; border-color: #ffd57a; box-shadow: 0 0 10px rgba(255,170,60,.55); }
body.mob .bn-auto { top: -26px; padding: 4px 12px; font-size: 12px; }
/* build plans (04/11) */
.pl-win { width: min(880px, calc(96vw / var(--z))); max-height: min(calc(92vh / var(--z)), 860px); display: flex; flex-direction: column; }
.pl-win .win-b { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.pl-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 16px; border-bottom: 1px solid rgba(141,106,46,.45); }
.pl-top select, .pl-top input { background: rgba(0,0,0,.35); color: #f4e4bd; border: 1px solid #8d6a2e; border-radius: 8px; padding: 6px 10px; font: 700 13px var(--body); }
.pl-top .pl-name { flex: 1 1 160px; min-width: 120px; }
.pl-tabs { display: inline-flex; border: 1px solid #8d6a2e; border-radius: 999px; overflow: hidden; }
.pl-tabs button { background: transparent; color: #cdbb93; border: 0; padding: 6px 14px; font: 800 12px var(--body); cursor: pointer; letter-spacing: .04em; }
.pl-tabs button.on { background: linear-gradient(180deg, #ffcf6a, #e3952e); color: #3a2208; }
.pl-help { margin: 0 0 8px; font: 600 12px var(--body); opacity: .8; }
.pl-list { display: flex; flex-direction: column; gap: 5px; }
.pl-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 10px; border: 1px solid rgba(141,106,46,.45); background: rgba(0,0,0,.18); }
.pl-row.fol { border-color: #e3a33a; background: rgba(227,163,58,.12); }
.pl-row.nev { opacity: .6; }
.pl-num { width: 20px; text-align: center; font: 900 14px var(--title); color: #ffd57a; }
.pl-mv { display: inline-flex; flex-direction: column; width: 22px; }
.pl-mv button { border: 0; background: transparent; color: #ffd57a; font-size: 10px; line-height: 1; padding: 1px; cursor: pointer; }
.pl-ico { display: inline-flex; width: 36px; justify-content: center; }
.pl-nm { flex: 1; min-width: 0; } .pl-nm b { display: block; font: 800 13px var(--body); line-height: 1.15; overflow-wrap: anywhere; } .pl-nm small { display: block; line-height: 1.15; } .pl-nm small { opacity: .7; font-size: 11px; }
.pl-seg { display: inline-flex; border: 1px solid #8d6a2e; border-radius: 999px; overflow: hidden; flex: none; }
.pl-seg button { background: transparent; color: #cdbb93; border: 0; padding: 5px 10px; font: 800 11.5px var(--body); cursor: pointer; }
.pl-seg button.on.v1 { background: linear-gradient(180deg, #ffcf6a, #e3952e); color: #3a2208; }
.pl-seg button.on.v0 { background: rgba(244,228,189,.18); color: #fff1d2; }
.pl-seg button.on.vm1 { background: #7a2a22; color: #ffd9cf; }
.pl-pact { display: flex; gap: 8px; align-items: center; margin-top: 10px; font: 700 13px var(--body); }
.pl-sum ol { margin: 6px 0 10px 18px; padding: 0; } .pl-sum li { margin: 4px 0; } .pl-sum h4 { margin: 0 0 4px; color: #ffd57a; }
.pl-foot { display: flex; gap: 8px; align-items: center; padding: 10px 16px; border-top: 1px solid rgba(141,106,46,.45); flex-wrap: wrap; }
#planwin { z-index: 9600; }
.plan-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); z-index: 3; white-space: nowrap; padding: 3px 10px; border-radius: 999px; background: linear-gradient(180deg, #ffe39a, #e8b64c); color: #3a2a0c; font: 900 11px var(--body); box-shadow: 0 0 12px rgba(255,190,60,.7); }
#card-list > .plan-rec { position: relative; box-shadow: 0 0 0 2px #ffcf6a, 0 0 22px rgba(255,190,60,.55) !important; }
#card-list > .plan-no { opacity: .72; }
.cls-plan { position: absolute; top: 6px; right: 14px; z-index: 5; }
.pz-plan { margin-left: 10px; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pz-plan.on { box-shadow: 0 0 0 2px #e3a33a inset; }
body.mob .pl-win { width: calc(calc(100vw / var(--z)) - 16px); max-height: calc(calc(100dvh / var(--z)) - 12px); }
body.mob .pl-seg button { padding: 6px 8px; font-size: 11px; }
body.mob .pl-win .win-h { padding-top: 6px; padding-bottom: 6px; }
/* (04/11) build plans v2 + community builds: dark windows */
.pl-win, .bw-win, .bp-win { background: linear-gradient(180deg, #2d261d, #1d1813); color: #f1e2bd; box-shadow: var(--shadow), 0 0 0 1px #000, inset 0 0 0 2px #6b5530; }
.pl-win .win-h, .bw-win .win-h, .bp-win .win-h { background: linear-gradient(180deg, #3b3125, #2a231b); border-bottom: 1px solid #6b5530; color: #ffe1a0; display: flex; align-items: center; gap: 8px; }
.pl-win .win-h h2, .bw-win .win-h h2, .bp-win .win-h h2 { color: #ffd57a; font-size: 18px; }
.pl-win .win-h small, .bw-win .win-h small, .bp-win .win-h small { color: #cdbb93; }
.pl-win .close, .bw-win .close, .bp-win .close { color: #ffd57a; cursor: pointer; font-size: 18px; padding: 0 6px; }
.pl-win { width: min(1080px, calc(97vw / var(--z))); max-height: min(calc(94vh / var(--z)), 900px); }
.pl-beta { font: 900 10px var(--body); background: #6b4a12; color: #ffd57a; padding: 2px 7px; border-radius: 999px; vertical-align: middle; letter-spacing: .06em; }
.pl-win select, .pl-win input, .pl-win textarea, .bw-win select, .bp-win select, .bp-win input, .bp-win textarea { background: rgba(0,0,0,.4); color: #f4e4bd; border: 1px solid #8d6a2e; border-radius: 8px; padding: 5px 8px; font: 700 12.5px var(--body); box-shadow: none; }
.pl-bar, .pl-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 14px; border-bottom: 1px solid rgba(141,106,46,.4); flex: none; }
.pl-tools { padding-top: 6px; padding-bottom: 6px; }
.pl-note { flex-basis: 100%; font: 600 11.5px var(--body); color: #cdbb93; }
.pl-lab { display: inline-flex; gap: 5px; align-items: center; font: 900 10.5px var(--body); color: #cdbb93; letter-spacing: .05em; }
.pl-lab select { max-width: 220px; }
.pl-info { font: 600 12px var(--body); color: #cdbb93; }
.pl-win .btn.small, .bw-win .btn.small { padding: 5px 12px; font-size: 12px; }
.pl-hints.on { background: linear-gradient(180deg, #4f7a33, #34561f); }
.pl-vote.on, .bw-vote.on { color: #c8331f; }
.pl-main { display: flex; gap: 0; padding: 0 !important; }
.pl-nav { flex: none; width: 210px; display: flex; flex-direction: column; gap: 4px; padding: 10px; border-right: 1px solid rgba(141,106,46,.4); }
.pl-nav button, .bw-side > button { display: flex; gap: 8px; align-items: center; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 10px; padding: 7px 9px; color: #f1e2bd; cursor: pointer; }
.pl-nav button i, .bw-side > button i { font-style: normal; color: #ffd57a; width: 18px; text-align: center; }
.pl-nav button b, .bw-side > button b { display: block; font: 800 13px var(--body); } .pl-nav button small, .bw-side > button small { display: block; font: 600 11px var(--body); color: #b9a77c; }
.pl-nav button.on, .bw-side > button.on { background: rgba(227,163,58,.16); border-color: #c58a2d; }
.pl-pane { flex: 1; min-width: 0; padding: 12px 14px; overflow-y: auto; }
.pl-two { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 14px; }
.pl-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pl-col h4, .pl-box h4, .pl-scol h4 { font: 900 12px var(--body); letter-spacing: .06em; color: #ffd57a; margin: 0 0 6px; }
.pl-box { border: 1px solid rgba(141,106,46,.45); border-radius: 12px; padding: 10px 12px; background: rgba(0,0,0,.18); margin-bottom: 10px; }
.pl-win .pl-row { border-color: rgba(141,106,46,.45); background: rgba(0,0,0,.22); }
.pl-row.sel-able { cursor: pointer; } .pl-row.cur { box-shadow: 0 0 0 2px #ffcf6a inset; }
.pl-row.fixed { opacity: .85; } .pl-row small { color: #b9a77c; }
.pl-win .pl-help { color: #b9a77c; opacity: 1; }
.pl-det { border: 1px solid rgba(141,106,46,.45); border-radius: 12px; padding: 12px; background: rgba(0,0,0,.18); align-self: start; }
.pl-dh { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; } .pl-dh p { margin: 3px 0; font: 600 12.5px var(--body); color: #e8d6ad; } .pl-dh small { color: #b9a77c; }
.pl-qh { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 6px 0; font: 900 11px var(--body); color: #ffd57a; flex-wrap: wrap; }
.pl-q { width: 100%; border-collapse: collapse; margin: 4px 0; font: 700 12.5px var(--body); }
.pl-q th { text-align: left; font: 900 10px var(--body); color: #b9a77c; letter-spacing: .05em; padding: 4px; }
.pl-q td { padding: 4px; border-top: 1px solid rgba(141,106,46,.3); }
.pl-q .qn { white-space: nowrap; } .pl-q .qn b { display: inline-block; min-width: 22px; text-align: center; }
.pl-q button { width: 24px; height: 24px; border-radius: 6px; border: 1px solid #8d6a2e; background: rgba(0,0,0,.35); color: #ffd57a; cursor: pointer; font-weight: 900; }
.pl-br { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.pl-br button { text-align: left; border: 1px solid rgba(141,106,46,.55); border-radius: 10px; background: rgba(0,0,0,.25); color: #f1e2bd; padding: 7px 9px; cursor: pointer; }
.pl-br button.on { border-color: #ffcf6a; background: rgba(227,163,58,.18); }
.pl-br small { display: block; font: 900 9.5px var(--body); color: #b9a77c; letter-spacing: .06em; } .pl-br b { display: block; font: 800 13px var(--body); } .pl-br span { display: block; font: 600 11px var(--body); color: #cdbb93; }
.pl-scol { border: 1px solid rgba(141,106,46,.45); border-radius: 12px; padding: 8px; background: rgba(0,0,0,.18); display: flex; flex-direction: column; gap: 5px; }
.pl-scol.v1 { border-color: #c58a2d; } .pl-scol.vm1 { opacity: .85; }
.pl-caps { display: flex; flex-wrap: wrap; gap: 8px 14px; } .pl-caps label { font: 700 12px var(--body); display: inline-flex; gap: 5px; align-items: center; } .pl-caps input { width: 70px; }
.pl-ul { margin: 4px 0 10px 18px; padding: 0; font: 600 12.5px var(--body); } .pl-ul li { margin: 3px 0; }
.pl-keep { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.pl-chip { display: inline-flex; gap: 5px; align-items: center; border: 1px solid #c58a2d; border-radius: 999px; padding: 2px 4px 2px 2px; font: 700 12px var(--body); background: rgba(227,163,58,.12); }
.pl-chip button { border: 0; background: transparent; color: #ffb3a3; cursor: pointer; }
.pl-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin-top: 8px; }
.pl-items button { display: flex; gap: 6px; align-items: center; text-align: left; border: 1px solid rgba(141,106,46,.5); border-radius: 10px; background: rgba(0,0,0,.25); color: #f1e2bd; padding: 4px 6px; font: 700 12px var(--body); cursor: pointer; }
.pl-items button.on { border-color: #ffcf6a; background: rgba(227,163,58,.2); }
.pl-empty { margin: auto; text-align: center; padding: 40px 20px; max-width: 520px; } .pl-empty p { color: #cdbb93; font: 600 14px var(--body); } .pl-star { font-size: 44px; color: #ffd57a; }
.pl-sum p { margin: 5px 0; font: 600 13.5px var(--body); color: #f1e2bd; }
.pl-seg.ro button { cursor: default; }
.pl-seg button.on:not(.v1):not(.v0):not(.vm1) { background: linear-gradient(180deg, #ffcf6a, #e3952e); color: #3a2208; }
.pl-seg button.on.v2 { background: linear-gradient(180deg, #ff9a6a, #d9631b); color: #2b1004; }
.pl-buildhead { display: flex; gap: 12px; padding: 10px 14px; border-bottom: 1px solid rgba(141,106,46,.4); flex: none; }
.bd-face, .bw-ch img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; object-position: top; background: #3a3125; border: 2px solid #c58a2d; flex: none; }
.bd-h { min-width: 0; flex: 1; } .bd-n { font: 800 17px var(--title); color: #ffe1a0; } .bd-by { font: 600 12px var(--body); color: #cdbb93; margin: 2px 0 6px; }
.bd-title { color: #c9a6ff; } .bd-up { color: #9fc8e8; }
.bd-tag, .bd-pace { display: inline-block; font: 900 9.5px var(--body); letter-spacing: .06em; padding: 2px 7px; border-radius: 6px; background: rgba(244,228,189,.12); color: #f1e2bd; margin-right: 4px; }
.bd-pace.p-normal { background: #2f5a2a; color: #d8ffd0; } .bd-pace.p-rush { background: #7a2a22; color: #ffd9cf; }
.bd-votes { color: #ff8f80; font: 800 12px var(--body); }
.bd-how { display: block; font: 900 10px var(--body); letter-spacing: .06em; color: #ffd57a; } .bd-d { font: 600 13px var(--body); color: #f1e2bd; white-space: pre-wrap; max-height: 110px; overflow-y: auto; }
/* gallery */
.bw-win { width: min(1180px, calc(97vw / var(--z))); height: min(calc(92vh / var(--z)), 880px); }
.bw-body { flex: 1; min-height: 0; display: flex; }
.bw-side { flex: none; width: 200px; padding: 10px; display: flex; flex-direction: column; gap: 4px; border-right: 1px solid rgba(141,106,46,.4); overflow-y: auto; }
.bw-side h5 { margin: 10px 4px 2px; font: 900 10.5px var(--body); letter-spacing: .08em; color: #b9a77c; }
.bw-side select { width: 100%; }
.bw-clear { border: 0; background: transparent; color: #ffd57a; text-decoration: underline; cursor: pointer; font: 700 12px var(--body); text-align: left; padding: 4px; }
.bw-main { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 10px 12px; gap: 8px; }
.bw-info { font: 600 12px var(--body); color: #cdbb93; border: 1px solid rgba(141,106,46,.4); border-radius: 10px; padding: 6px 10px; display: flex; gap: 8px; } .bw-info span { margin-left: auto; white-space: nowrap; color: #ffd57a; font-weight: 800; }
.bw-grid { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-content: start; }
.bw-card { border: 1px solid rgba(141,106,46,.55); border-radius: 12px; padding: 10px; background: rgba(0,0,0,.22); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bw-ch { display: flex; gap: 9px; align-items: center; } .bw-ch img { width: 46px; height: 46px; } .bw-ch b { display: block; font: 800 14.5px var(--title); color: #ffe1a0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bw-ch small { display: block; font: 600 11px var(--body); color: #cdbb93; } .bw-ch > div { min-width: 0; }
.bw-sps { display: flex; gap: 3px; align-items: center; flex-wrap: wrap; } .bw-sps small { color: #b9a77c; font: 700 11px var(--body); margin-left: 3px; }
.bw-prio { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; } .bw-prio small { color: #b9a77c; font: 800 10.5px var(--body); }
.bw-chip { font: 800 10.5px var(--body); background: rgba(227,163,58,.16); border: 1px solid #8d6a2e; border-radius: 999px; padding: 1px 7px; }
.bw-d { margin: 0; font: 600 12px var(--body); color: #e8d6ad; flex: 1; overflow-wrap: anywhere; } .bw-more { color: #ffd57a; font: 700 11.5px var(--body); }
.bw-act { display: flex; gap: 5px; align-items: center; }
.bw-pages { display: flex; gap: 10px; justify-content: center; align-items: center; font: 700 13px var(--body); }
.bw-pages button { border: 1px solid #8d6a2e; background: rgba(0,0,0,.35); color: #ffd57a; border-radius: 8px; padding: 3px 12px; cursor: pointer; } .bw-pages button:disabled { opacity: .4; }
.bw-wait { grid-column: 1 / -1; text-align: center; color: #cdbb93; padding: 30px; font: 600 14px var(--body); }
.bp-win { width: min(560px, calc(94vw / var(--z))); } .bp-l { display: flex; flex-direction: column; gap: 4px; font: 800 12px var(--body); color: #cdbb93; margin-bottom: 10px; } .bp-l textarea { resize: vertical; user-select: text; } .bp-l input { user-select: text; }
.bp-row { display: flex; gap: 8px; flex-wrap: wrap; } .bp-row .bp-l { flex: 1 1 140px; }
#bpubwin { z-index: 9700; } #buildwin { z-index: 9590; } #planwin { z-index: 9600; }
@media (max-width: 900px) { .bw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pl-two { grid-template-columns: 1fr; } .pl-three { grid-template-columns: 1fr; } }
body.mob .overlay > .win.modal.pl-win, body.mob .overlay > .win.modal.bw-win { width: calc(calc(100vw / var(--z)) - 12px) !important; height: calc(calc(100dvh / var(--z)) - 10px) !important; max-height: none; }
body.mob .overlay > .win.modal.bp-win { width: calc(calc(100vw / var(--z)) - 16px) !important; }
body.mob .pl-main, body.mob .bw-body { flex-direction: column; }
body.mob .pl-nav, body.mob .bw-side { width: auto; flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid rgba(141,106,46,.4); padding: 6px; flex-wrap: nowrap; }
body.mob .pl-nav button, body.mob .bw-side > button { flex: none; padding: 5px 8px; } body.mob .pl-nav button small { display: none; }
body.mob .bw-side h5 { display: none; } body.mob .bw-side select { width: auto; flex: none; }
body.mob .bw-grid { grid-template-columns: 1fr; }
body.mob .pl-lab select { max-width: 150px; } body.mob .pl-note { display: none; }
body.mob .pl-bar, body.mob .pl-tools { padding: 5px 8px; gap: 5px; }
.cls-builds { position: absolute; top: 6px; right: 176px; z-index: 5; } body.mob .cls-builds { right: auto; left: 14px; }
body.mob .overlay > .win.modal.pl-win, body.mob .overlay > .win.modal.bw-win { display: block; overflow-y: auto; -webkit-overflow-scrolling: touch; }
body.mob .pl-win .win-b.pl-main { overflow: visible; } body.mob .pl-pane { overflow: visible; } body.mob .bw-grid { overflow: visible; }
body.mob .pl-win .win-h, body.mob .bw-win .win-h { position: sticky; top: 0; z-index: 4; }
body.mob .pl-foot { display: none; } body.mob .bd-d { max-height: 60px; }
body.mob .pl-bar, body.mob .pl-tools, body.mob .pl-nav, body.mob .bw-side { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } body.mob .pl-bar > *, body.mob .pl-tools > * { flex: none; }
body.mob .bw-win .win-h .btn { padding: 4px 9px; font-size: 11px; }
.toasts { z-index: 9800 !important; }
body:has(#planwin:not(.hidden)) .hq-tog, body:has(#buildwin:not(.hidden)) .hq-tog, body:has(#bpubwin:not(.hidden)) .hq-tog { display: none; }
@media (min-width: 700px) { body.mob .bw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
body.mob .pc-only { display: none !important; }
/* (04/11) buffs and states with their time left, above the spell bar */
.hero-state { display: none !important; }
.buffbar { position: absolute; left: 0; bottom: calc(100% + 6px); display: flex; flex-wrap: wrap-reverse; gap: 4px; max-width: 100%; pointer-events: auto; }
.buffbar.hidden { display: none; }
.bf { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px 3px 3px; border-radius: 8px; background: rgba(35,29,22,.88); border: 1px solid #c79a4c; color: #f3e2b0; font: 700 11px var(--body); overflow: hidden; white-space: nowrap; }
.bf b { color: #ffd57a; font-weight: 900; } .bf span { max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.bf.neg { border-color: #c0503a; } .bf.neg b { color: #ff9a85; }
.bf.st { padding-left: 7px; }
.bf .bf-ch { font-style: normal; width: 22px; text-align: center; color: #ffd57a; }
.bf .bf-t { position: absolute; left: 0; bottom: 0; height: 2px; background: #ffcf6a; }
.bf.neg .bf-t { background: #ff8a70; }
body.mob .buffbar { bottom: calc(100% + 3px); } body.mob .bf { font-size: 9.5px; padding: 1px 5px 2px 2px; } body.mob .bf span { max-width: 70px; }

.fg-auto { padding-left: 8px !important; padding-right: 8px !important; } .fg-autoall { display: flex; justify-content: flex-end; margin: 8px 0 4px; }
#b-autopick.plan-on { box-shadow: 0 0 0 2px #ffcf6a inset; }
.dmgkind { display: block; font: 600 10.5px var(--body); color: var(--ink2); white-space: nowrap; } .dbsum { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 2px 0 8px; font: 600 12px var(--body); } .dbsum b { color: #c8331f; }
/* (05/11) trading cards: binder and booster opening */
.tgw { display: flex; flex-direction: column; gap: 10px; }
.tg-top { display: flex; gap: 12px; flex-wrap: wrap; }
.tg-prog { flex: 1 1 260px; padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,.08); border: 1px solid var(--parch-line); }
.tg-prog b { font: 800 20px var(--title); } .tg-prog small { display: block; color: var(--ink2); margin-top: 4px; }
.tg-bar { height: 8px; border-radius: 6px; background: rgba(0,0,0,.15); overflow: hidden; margin-top: 6px; } .tg-bar i { display: block; height: 100%; background: linear-gradient(90deg, #f0c35a, #ff7ad9, #7ad7ff); }
.tg-packs { flex: 1 1 320px; padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,.08); border: 1px solid var(--parch-line); }
.tg-packs h4 { margin: 0 0 6px; display: flex; gap: 8px; align-items: center; } .tg-packs h4 span { background: #c8331f; color: #fff; border-radius: 999px; padding: 0 8px; font: 800 12px var(--body); }
.tg-pl { display: flex; flex-wrap: wrap; gap: 6px; }
.tg-pk { display: flex; gap: 8px; align-items: center; padding: 5px 10px 5px 6px; border-radius: 10px; border: 1px solid #8d6a2e; background: linear-gradient(180deg, #fff5da, #ecd9a8); cursor: pointer; text-align: left; }
.tg-pk:hover { filter: brightness(1.05); transform: translateY(-1px); } .tg-pk b { display: block; font: 800 12.5px var(--body); } .tg-pk small { color: #c8331f; font-weight: 800; }
.tg-bst { display: inline-block; width: 26px; height: 36px; border-radius: 4px; background: linear-gradient(135deg, #ff5ad6, #7a4bff 45%, #2fb5ff); box-shadow: inset 0 0 0 2px rgba(255,255,255,.55), 0 2px 4px rgba(0,0,0,.35); position: relative; flex: none; }
.tg-bst::after { content: '★'; position: absolute; inset: 0; display: grid; place-items: center; color: #fff6c8; font-size: 14px; text-shadow: 0 0 4px #000; }
.tg-bst.big { width: 130px; height: 180px; border-radius: 10px; } .tg-bst.big::after { font-size: 60px; }
.tg-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.tg-tabs button { border: 1px solid var(--parch-line); background: rgba(255,255,255,.45); border-radius: 999px; padding: 4px 10px; font: 700 12px var(--body); cursor: pointer; color: var(--ink); }
.tg-tabs button.on { background: linear-gradient(180deg, #ffcf6a, #e3952e); color: #3a2208; border-color: #8d6a2e; }
.tg-tabs button.f1::after { content: ' ✓'; color: #3f8f3a; } .tg-tabs button.f2::after { content: ' ✦'; color: #c06ad9; }
.tg-fam { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 600 12.5px var(--body); color: var(--ink2); } .tg-fam .ok { color: #2e7d32; }
.tg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 10px; }
.tg-cell { display: flex; flex-direction: column; gap: 4px; align-items: center; } .tg-cell.two { flex-direction: row; justify-content: center; gap: 6px; }
.tg-pass { font: 600 11px var(--body); color: var(--ink2); text-align: center; max-width: 160px; }
.tc { position: relative; width: 110px; height: 154px; border-radius: 9px; padding: 4px; background: linear-gradient(160deg, #e9d7a6, #b8955a); box-shadow: 0 2px 6px rgba(0,0,0,.35); flex: none; }
.tc-in { position: relative; height: 100%; border-radius: 6px; background: linear-gradient(180deg, #fffaf0, #efe2bd); overflow: hidden; display: flex; flex-direction: column; align-items: center; padding: 4px; }
.tc-art { flex: 1; width: 100%; display: grid; place-items: center; overflow: hidden; border-radius: 4px; background: radial-gradient(circle at 50% 40%, #fff, #e8dcb8); }
.tc-art img { max-width: 100%; max-height: 92px; object-fit: contain; }
.tc b { font: 800 10.5px var(--body); text-align: center; line-height: 1.1; max-height: 24px; overflow: hidden; margin-top: 2px; color: #3a3024; }
.tc small { font: 700 9px var(--body); color: #8b7a55; text-transform: uppercase; letter-spacing: .04em; }
.tc.k-mini { background: linear-gradient(160deg, #b9d4ff, #4f7cc8); } .tc.k-boss { background: linear-gradient(160deg, #ffb2a0, #c8331f); } .tc.k-archi { background: linear-gradient(160deg, #e2c4ff, #8a4bb8); }
.tc.shiny { background: linear-gradient(135deg, #fff3a8, #ffd24a 25%, #fff 45%, #ffb83a 70%, #fff3a8); box-shadow: 0 0 10px rgba(255,200,60,.8), 0 2px 6px rgba(0,0,0,.35); }
.tc.ultra { background: linear-gradient(135deg, #ff5ad6, #ffd24a, #5aff9e, #5ad7ff, #a45aff, #ff5ad6); background-size: 300% 300%; animation: tcRain 4s linear infinite; box-shadow: 0 0 14px rgba(255,90,214,.8), 0 2px 6px rgba(0,0,0,.35); }
@keyframes tcRain { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }
.tc-holo { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.75) 45%, rgba(255,215,120,.35) 52%, transparent 65%); background-size: 250% 100%; animation: tcHolo 3s ease-in-out infinite; mix-blend-mode: screen; }
.tc.ultra .tc-holo { background: linear-gradient(115deg, transparent 25%, rgba(255,120,230,.55) 40%, rgba(120,255,200,.5) 50%, rgba(120,200,255,.55) 60%, transparent 75%); background-size: 250% 100%; }
@keyframes tcHolo { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
.tc.locked { background: linear-gradient(160deg, #9a8c70, #6b5f48); opacity: .55; } .tc.locked.shiny, .tc.locked.ultra { background: linear-gradient(160deg, #c9b46a, #8a7430); animation: none; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.tc.locked .tc-in { background: rgba(0,0,0,.18); justify-content: center; } .tc-q { font: 900 40px var(--title); color: rgba(255,255,255,.5); } .tc.locked small { color: rgba(255,255,255,.75); }
.tc-n { position: absolute; right: -6px; top: -6px; background: #3a3024; color: #ffd57a; border-radius: 999px; padding: 1px 6px; font: 800 11px var(--body); font-style: normal; }
.tc-new { position: absolute; left: 50%; top: -9px; transform: translateX(-50%); background: #c8331f; color: #fff; border-radius: 999px; padding: 1px 8px; font: 900 10px var(--body); font-style: normal; letter-spacing: .06em; white-space: nowrap; }
#tgopen { z-index: 9700; background: rgba(10,6,3,.82); display: grid; place-items: center; }
#tgopen.hidden { display: none; }
.tgo { display: flex; flex-direction: column; align-items: center; gap: 18px; perspective: 1000px; }
.tgo-pack { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #ffe1a0; font: 800 15px var(--title); animation: tgShake .45s ease-in-out 1; }
.tgo-pack.torn { animation: tgTear .5s ease-in forwards; }
@keyframes tgShake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg) scale(1.04); } 75% { transform: rotate(6deg) scale(1.04); } }
@keyframes tgTear { to { transform: translateY(-40px) scale(1.25); opacity: 0; height: 0; } }
.tgo-cards { display: flex; gap: 18px; }
.tgo-c { position: relative; width: 150px; height: 210px; perspective: 900px; opacity: 0; animation: tgIn .4s ease-out forwards; animation-delay: calc(.8s + var(--d)); }
.tgo-r { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.2,.9,.3,1.2); }
@keyframes tgIn { from { opacity: 0; translate: 0 60px; scale: .6; } to { opacity: 1; translate: 0 0; scale: 1; } }
.tgo-c.flip .tgo-r { transform: rotateY(180deg); }
.tgo-f { position: absolute; inset: 0; backface-visibility: hidden; display: grid; place-items: center; }
.tgo-back { border-radius: 12px; background: linear-gradient(135deg, #ff5ad6, #7a4bff 45%, #2fb5ff); box-shadow: inset 0 0 0 4px rgba(255,255,255,.55), 0 6px 16px rgba(0,0,0,.5); }
.tgo-back::after { content: '★'; color: #fff6c8; font-size: 60px; text-shadow: 0 0 8px #000; }
.tgo-face { transform: rotateY(180deg); } .tgo-face .tc { transform: scale(1.36); }
.tgo-msg { min-height: 24px; color: #ffe1a0; font: 800 15px var(--body); text-align: center; } .tgo-msg p { margin: 3px 0; }
.tgo-btns { display: flex; gap: 10px; }
body.mob .tgo-c { width: 104px; height: 146px; } body.mob .tgo-face .tc { transform: scale(.94); } body.mob .tgo-cards { gap: 8px; } body.mob .tg-bst.big { width: 80px; height: 110px; }
body.mob .tc { width: 92px; height: 130px; } body.mob .tg-grid { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); }
body:has(#vwin:not(.hidden)) .hq-tog, body:has(#tgopen:not(.hidden)) .hq-tog { display: none; }
/* (05/11) GéoDofus */
.side-col .side-emo .emo-ic { font-style: normal; font-size: 20px; line-height: 1; }
#geowin { z-index: 9600; }
.geo-win { width: min(1100px, 97vw); height: min(92vh, 860px); background: linear-gradient(180deg, #2d261d, #1d1813); color: #f1e2bd; box-shadow: var(--shadow), 0 0 0 1px #000, inset 0 0 0 2px #6b5530; display: flex; flex-direction: column; }
.geo-win .win-h { background: linear-gradient(180deg, #3b3125, #2a231b); border-bottom: 1px solid #6b5530; display: flex; align-items: center; } .geo-win .win-h h2 { color: #ffd57a; } .geo-win .win-h small { color: #cdbb93; } .geo-win .close { color: #ffd57a; cursor: pointer; font-size: 18px; padding: 0 6px; }
.geo-b { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 12px 14px; gap: 10px; overflow-y: auto; }
.geo-win.playing .geo-b { overflow: hidden; }
.geo-menu { display: flex; flex-direction: column; gap: 12px; }
.geo-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.geo-card, .geo-board { border: 1px solid rgba(141,106,46,.5); border-radius: 12px; padding: 12px 14px; background: rgba(0,0,0,.2); display: flex; flex-direction: column; gap: 8px; }
.geo-card h3, .geo-board h3 { margin: 0; color: #ffd57a; font-size: 17px; } .geo-card p { margin: 0; font: 600 13px var(--body); color: #e8d6ad; }
.geo-card label { display: flex; flex-direction: column; gap: 4px; font: 800 12px var(--body); color: #cdbb93; }
.geo-card input { background: rgba(0,0,0,.4); color: #f4e4bd; border: 1px solid #8d6a2e; border-radius: 8px; padding: 6px 9px; font: 700 13px var(--body); user-select: text; box-shadow: none; }
.geo-card .btn { align-self: flex-start; margin-top: auto; }
.geo-top3 { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.geo-top3 li { display: grid; grid-template-columns: 34px 1fr auto 80px; gap: 8px; align-items: center; padding: 4px 8px; border-radius: 8px; background: rgba(255,255,255,.04); font: 700 13px var(--body); }
.geo-top3 li.me { box-shadow: 0 0 0 1px #ffcf6a inset; } .geo-top3 li b { color: #ffd57a; font-family: var(--title); } .geo-top3 li em { font-style: normal; color: #ffd57a; } .geo-top3 li small { color: #b9a77c; text-align: right; }
.geo-top3 li.p1 b::after { content: ' 🥇'; } .geo-top3 li.p2 b::after { content: ' 🥈'; } .geo-top3 li.p3 b::after { content: ' 🥉'; }
.geo-top { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font: 700 14px var(--body); flex: none; }
.geo-rd b { color: #ffd57a; font-family: var(--title); font-size: 18px; } .geo-sc { color: #cdbb93; } .geo-sc.vs { color: #ff9a85; } .geo-pts b { color: #8cff8a; font-size: 18px; }
.geo-tm { position: relative; flex: 1; min-width: 160px; height: 22px; border-radius: 999px; background: rgba(0,0,0,.4); overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 4px; font: 800 12px var(--body); }
.geo-tm i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #ffcf6a, #e3952e); animation: geoT var(--t) linear forwards; z-index: 0; } .geo-tm.g i { background: linear-gradient(90deg, #6cc15a, #e0b23a, #c8331f); }
.geo-tm > *:not(i) { position: relative; z-index: 1; } .geo-tm { color: #1d1813; } .geo-tm.g { color: #fff; text-shadow: 0 1px 2px #000; }
@keyframes geoT { from { width: 100%; } to { width: 0%; } }
.geo-shot { flex: 1; min-height: 0; display: grid; place-items: center; } .geo-shot img { max-width: 100%; max-height: 100%; border-radius: 10px; box-shadow: 0 0 0 2px #6b5530, 0 10px 30px rgba(0,0,0,.6); image-rendering: auto; width: 100%; object-fit: contain; animation: geoIn .3s ease-out; }
@keyframes geoIn { from { opacity: 0; transform: scale(.96); } }
.geo-mapw { flex: 1; min-height: 0; position: relative; }
#geowin .gm { display: block; padding: 0; gap: 0; border: 0; position: absolute; inset: 0; overflow: hidden; border-radius: 10px; background: #e0d7c0; box-shadow: 0 0 0 2px #6b5530; cursor: crosshair; touch-action: none; }
.gm-in { position: absolute; left: 0; top: 0; transform-origin: 0 0; } .gm-in img { display: block; width: 100%; height: 100%; user-select: none; pointer-events: none; }
.gm-pins { position: absolute; inset: 0; pointer-events: none; }
.gm-pin { position: absolute; width: 0; height: 0; transform: scale(var(--k, 1)); }
.gm-pin::before { content: ''; position: absolute; left: -9px; top: -24px; width: 18px; height: 18px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #2f79c8; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.6); }
.gm-pin.ans::before { background: #3fbf3a; } .gm-pin.vs::before { background: #c8331f; }
.gm-pin b { position: absolute; left: 14px; top: -30px; white-space: nowrap; background: rgba(0,0,0,.75); color: #fff; font: 800 12px var(--body); padding: 1px 6px; border-radius: 6px; }
.gm-line { position: absolute; height: 0; border-top: 3px dashed #ffd57a; transform-origin: 0 50%; filter: drop-shadow(0 0 2px #000); }
.gm-zoom { position: absolute; right: 8px; top: 8px; display: flex; flex-direction: column; gap: 4px; } .gm-zoom button { width: 32px; height: 32px; border-radius: 8px; border: 1px solid #8d6a2e; background: rgba(0,0,0,.6); color: #ffd57a; font: 900 18px var(--body); cursor: pointer; }
.geo-help { margin: 0; font: 600 11.5px var(--body); color: #b9a77c; text-align: center; flex: none; }
.geo-ans { flex: none; font: 800 15px var(--body); color: #8cff8a; display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline; } .geo-ans small { color: #b9a77c; } .geo-vs { color: #e8d6ad; font-size: 13px; }
.geo-end { display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; } .geo-end h3 { color: #ffd57a; margin: 0; }
.geo-total { font: 900 44px var(--title); color: #ffd57a; } .geo-total small { font: 700 14px var(--body); color: #b9a77c; }
.geo-win.w, p.geo-win.w { color: #8cff8a; font: 800 16px var(--body); } p.geo-win.l { color: #ff9a85; font: 800 16px var(--body); } p.geo-win { font: 800 16px var(--body); }
.geo-btns { display: flex; gap: 10px; }
.geo-inv { position: fixed; right: 16px; top: 80px; z-index: 9900; background: rgba(35,29,22,.96); border: 2px solid #c79a4c; border-radius: 14px; padding: 12px 14px; color: #f3e2b0; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.5); max-width: 300px; animation: geoIn .3s ease-out; }
.geo-inv b { color: #ffd57a; } .geo-inv div { display: flex; gap: 8px; justify-content: flex-end; }
@media (max-width: 760px) { .geo-modes { grid-template-columns: 1fr; } }
body.mob .overlay > .win.modal.geo-win { width: calc(100vw - 10px) !important; height: calc(100dvh - 8px) !important; max-height: none; }
body.mob .geo-b { padding: 6px 8px; gap: 6px; } body.mob .geo-help { display: none; } body.mob .geo-top { gap: 8px; font-size: 12px; }
body:has(#geowin:not(.hidden)) .hq-tog { display: none; }