/* 13 Oct (win): the frame of the interface, loaded after every other sheet.
   1. #app never scrolls and the bottom HUD fits any width 901–2560 (fluid sizes instead of fixed steps; 901–1250: the minimap sits over the commands).
   2. One window frame for modal(): header with «?», hotkey and ✕; a soft appear; reference windows dock to the right above the HUD.
   3. A lighter top bar: thin zone tabs, one cluster of square icon buttons, the hero search folded into a magnifier.
   4. Small life: the pale tail of lost health, rolling gold with a flash, buttons that give under the finger, the toast slides in.
   5. The city window: cards of the residents in three groups.
   Desktop rules are guarded by (min-width:901px) and (min-height:501px), so the narrow (≤900) and the phone blocks of game.css stay as they are. */

#app{overflow:clip}

/* ---------- 1. the bottom HUD, desktop ---------- */
@media (min-width:901px) and (min-height:501px){
  :root{--ab:clamp(40px,3.3vw,56px);--itS:clamp(40px,3.4vw,62px);--mmW:clamp(150px,12.5vw,243px);--pt:clamp(64px,4.6vw,78px);--sepM:clamp(4px,.55vw,10px);--sepP:clamp(8px,.8vw,16px)}
  #hud{display:flex!important;flex-wrap:nowrap!important;left:0;right:0;width:auto;max-width:100%;box-sizing:border-box}
  #hud>*{min-width:0}
  #hudmm{display:flex!important;flex:0 0 auto}
  #mm{width:var(--mmW)!important;height:calc(var(--mmW) * .66)!important}
  #hud>#dock{flex:1 1 auto;min-width:0}
  #dock>*+*{margin-left:var(--sepM)!important;padding-left:var(--sepP)!important}
  #dock>#side{flex:1 1 0!important;min-width:150px!important;max-width:400px}
  #hud>#right{flex:0 0 auto}
  /* the hero: name, portrait, then the power and the two buttons wrap under it */
  #dock #hero{flex:none;max-width:calc(var(--pt) + 66px)}
  #dock #portrait{width:var(--pt)!important;height:var(--pt)!important}
  #dock #hname{max-width:calc(var(--pt) + 66px);overflow:hidden;text-overflow:ellipsis}
  #dock #hcol{flex-wrap:wrap;justify-content:center;row-gap:2px;column-gap:4px;max-width:calc(var(--pt) + 66px)}
  #dock #side>#tabs{min-width:0;overflow:hidden}#dock #side>#tabs button{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #dock #hcol>.stats{flex:1 1 100%;justify-content:center}
  #dock #hero{row-gap:1px!important}
  /* the spells and the gear scale with the window */
  #hud #abil .ab{width:var(--ab)!important;height:var(--ab)!important}
  #dock #abil{gap:clamp(3px,.35vw,6px)!important}
  #dock #inv{flex-wrap:wrap;row-gap:0;column-gap:6px;max-width:100%}
  #dock>#items{grid-template-columns:repeat(3,var(--itS))!important;grid-template-rows:repeat(2,var(--itS))!important;grid-auto-rows:var(--itS)!important}
  #dock #items .it{width:var(--itS)!important;height:var(--itS)!important;max-height:none!important}
  #hudBtns{padding:0 2px!important}
  /* the commands: two columns; an odd last button takes the whole row */
  #hud #cmds{grid-template-columns:1fr 1fr!important}
  #hud #cmds .btn:last-child:nth-child(odd){grid-column:1/-1}
}
/* up to 1500: smaller diamonds, so the agent block keeps room for its four tabs */
@media (min-width:1101px) and (max-width:1500px) and (min-height:501px){
  #hudBtns{grid-template-columns:repeat(6,16px)!important;grid-template-rows:50px 50px!important}
  #hudBtns>button{width:27px!important;height:27px!important}#hudBtns>button svg{width:16px!important;height:16px!important}
  #dock #side>#tabs button{font-size:10.5px!important;padding:1px 1px 3px!important}
}
/* wide screens: the hero's power and buttons fit in one row under a bigger portrait */
@media (min-width:1700px) and (min-height:501px){
  :root{--pt:84px}
  #dock #hero,#dock #hname,#dock #hcol{max-width:none}
  #dock #hcol{flex-wrap:nowrap}#dock #hcol>.stats{flex:none}
}
/* 901–1250: the minimap moves over the commands at the right (a small tower, as tall as both), the dock gets the rest of the row */
@media (min-width:901px) and (max-width:1250px) and (min-height:501px){
  :root{--mmW:clamp(132px,15vw,170px);--ab:clamp(34px,3.4vw,42px);--itS:clamp(34px,3.5vw,44px);--pt:clamp(60px,6vw,72px)}
  #hud{display:grid!important;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:end}
  #hud>#dock{grid-column:1;grid-row:1/3;align-self:end}
  #hudmm{grid-column:2;grid-row:1;justify-content:center;border-width:10px 10px 0 0!important;border-image-width:12px 12px 0 0!important;align-self:end!important}
  #hud>#right{grid-column:2;grid-row:2;height:auto!important;border-width:4px 10px 10px 0!important;border-image-width:6px 12px 12px 0!important;align-self:stretch!important}
  #hud #cmds{grid-template-columns:repeat(3,1fr)!important;width:100%}
  #hud #cmds .btn:last-child:nth-child(odd){grid-column:auto}
  #hud #cmds .btn{font-size:10px!important;padding:2px 3px!important}
  #dock>#side{min-width:120px!important}
}
/* the narrowest desktops: the diamonds leave the bar for the left edge of the screen, where they stood before the bar took them in */
@media (min-width:901px) and (max-width:1100px) and (min-height:501px){
  #dock>#hudBtns{position:absolute;left:10px;bottom:calc(100% + 150px);margin:0!important;padding:0!important;border:0!important;grid-template-columns:repeat(4,20px)!important;grid-template-rows:repeat(3,38px)!important}
  #hudBtns>#sleepBtn{grid-area:1/1/2/3}#hudBtns>#compBtn{grid-area:2/1/3/3}#hudBtns>#dunBtn{grid-area:3/1/4/3}#hudBtns>#clanBtn{grid-area:1/3/3/5;align-self:center}#hudBtns>#mktBtn{grid-area:2/3/4/5;align-self:center}
  #hudBtns>button{width:28px!important;height:28px!important}
}

/* ---------- 3. the top bar ---------- */
@media (min-width:901px) and (min-height:501px){
  #top{flex-wrap:nowrap;gap:6px;padding:6px 12px 10px;background:linear-gradient(180deg,#0c0806cc,#0c080000)}
  #top>*{flex:none}
  #top>.grow{flex:1 1 0}
  #top .logo{font-size:20px}
  /* the zones: a thin row of tabs, the current one underlined */
  #zones{flex:0 1 auto;min-width:0;overflow:hidden;gap:0;margin-left:6px}
  #zones .btn{border:0!important;border-image:none!important;background:none!important;border-bottom:2px solid transparent!important;padding:3px 7px 2px!important;font-size:11.5px!important;font-weight:600;color:#c9b894;text-shadow:0 1px 2px #000,0 0 4px #000}
  #zones .btn:hover:not(:disabled){color:#fff6dc;border-bottom-color:#8d6847!important}
  #zones .btn.on{color:#fff2d0;border-bottom-color:var(--ember)!important}
  #zones .btn:disabled{opacity:.42;filter:none}
  #zones .btn small{font-size:10px;opacity:.75}
  /* chips: slimmer */
  #top .btn,#top .panel{border-width:3px!important;border-image-width:6px!important}
  #evChip,#online{font-size:11.5px!important}
  #gold{padding:2px 8px!important}
  /* one cluster of square icon buttons at the right: full screen, sound, graphics, language, menu */
  #fsBtn,#sndBtn,#gfxBtn,#lang,#sideBtn,#menuBtn{order:10;width:28px;height:28px;box-sizing:border-box;padding:0!important;display:inline-grid!important;place-items:center;font-size:12.5px!important;line-height:1!important;gap:0!important}
  #sideBtn{display:none!important}
  #fsBtn{font-size:0!important;margin-left:4px}#fsBtn svg{width:13px!important;height:13px!important}
  #sndBtn,#gfxBtn,#lang,#menuBtn{margin-left:-3px}
  #lang{font-size:11px!important;letter-spacing:.02em}
}
/* the hero search: a magnifier that opens into a field */
.srch{position:relative;display:inline-flex;align-items:center;cursor:text}
.srch::before{content:"";position:absolute;left:9px;top:50%;width:9px;height:9px;margin-top:-6px;border:2px solid #c9b894;border-radius:50%;pointer-events:none;z-index:1}
.srch::after{content:"";position:absolute;left:19px;top:50%;width:2px;height:6px;margin-top:2px;background:#c9b894;transform:rotate(-45deg);pointer-events:none;z-index:1}
#top .srch #search{width:28px;height:28px;box-sizing:border-box;padding:2px 6px 2px 26px;transition:width .18s ease;cursor:pointer;border-width:3px;border-image-width:6px}
#top .srch #search:focus,#top .srch #search:not(:placeholder-shown){width:170px;cursor:text}
#top .srch #search:not(:focus)::placeholder{color:transparent}
.srch:hover::before{border-color:#fff6dc}.srch:hover::after{background:#fff6dc}
@media (max-width:900px){.srch{display:none}}
@media (orientation:landscape) and (max-height:500px),(orientation:portrait) and (max-width:500px){#top .srch{display:none!important}}
@media (prefers-reduced-motion:reduce){#top .srch #search{transition:none}}

/* lighter floating panels over the world */
#loreTrk,#target,#watch,#lfgBar{background:#130e0ae0;background-clip:padding-box}

/* ---------- 2. windows ---------- */
.veil{animation:vIn .14s ease-out}
.veil>.modal{position:relative;animation:mIn .14s cubic-bezier(.2,.8,.3,1);transform-origin:50% 40%}
.veil.still,.veil.still>.modal{animation:none}
.veil:not(.side)>.modal.panel:not(.aucFull):not(:has(.jrn)):not(:has(.ofWrap)){max-height:calc(100vh - 104px)}   /* the frame (2×28) and the padding are outside the content box */
@keyframes vIn{from{background-color:#0a060400}}
@keyframes mIn{from{opacity:0;transform:scale(.965)}}
@keyframes mSide{from{opacity:0;transform:translateX(18px)}}
/* the header stays on top while the window scrolls */
.modal>h2.mHead{position:sticky;top:-6px;z-index:3;margin:-6px -10px 8px;padding:6px 10px 8px;justify-content:flex-start;gap:10px;flex-wrap:wrap;
  background:url(../assets/img/kit-tabline.png) repeat-x left bottom/32px 6px,url(../assets/img/ui-fill.png) #1a130e}
.modal>h2.mHead{flex-wrap:nowrap}
.mHead>span:first-child:not(.mTools){min-width:0;overflow-wrap:anywhere}
.mHead>:nth-child(2):not(.mTools):not(.mDup){margin-left:auto;flex:none}
.mHead>:nth-child(2):not(.mTools):not(.mDup)~.mTools{margin-left:0}
.modal h2 .mDup{display:none!important}
.mTools{display:inline-flex;align-items:center;gap:5px;margin-left:auto;flex:none;font:600 13px var(--f-ui);text-shadow:none}
.mTools.abs{position:absolute;top:0;right:0;z-index:4}
.mX,.mQ{width:26px;height:26px;padding:0;display:grid;place-items:center;border:1px solid #6a4a2a;background:#120c08d9;color:#d9c89a;font:700 13px/1 var(--f-ui);box-shadow:inset 0 1px 0 #ffffff12,0 1px 0 #000;transition:color .12s,border-color .12s,background .12s,transform .06s}
.mX:hover,.mQ:hover,.mX:focus-visible,.mQ:focus-visible{color:#fff6dc;border-color:var(--ember2);background:#2a1a0e}
.mX:active,.mQ:active{transform:translateY(1px) scale(.95)}
.mQ{border-radius:50%;width:22px;height:22px;font-size:12px}
.mQ[aria-expanded=true]{color:var(--gold);border-color:var(--ember)}
.mTools kbd{font:600 11px/1 var(--f-ui);color:var(--dim);padding:3px 6px;border:1px solid #4a3622;border-bottom-width:2px;background:#0000004d;border-radius:2px}
/* the opening paragraph: folded into «?»; open the first time, then shown on hover or pinned by a click */
.modal .mHelp{display:none}
.modal.helpOn .mHelp{display:block;animation:hIn .15s ease-out}
.modal.helpPeek .mHelp{display:block;position:absolute;left:10px;right:10px;z-index:5;margin:0;max-width:none;padding:9px 11px;color:var(--ink);background:#120c08f5;border:1px solid var(--line2);box-shadow:0 8px 24px #000c;pointer-events:none}
@keyframes hIn{from{opacity:0;transform:translateY(-3px)}}
/* reference windows: docked at the right above the HUD, the world stays visible and takes the clicks around them */
@media (min-width:901px) and (min-height:501px){
  .veil.side{pointer-events:none;background:none!important;display:flex;justify-content:flex-end;align-items:flex-start;padding:calc(var(--topH,44px) + 6px) 12px calc(var(--hudH,170px) + 8px);animation:none}
  .veil.side>.modal{box-sizing:border-box;pointer-events:auto;width:min(540px,100%);max-height:100%!important;animation-name:mSide;box-shadow:0 0 0 2px #000,-10px 12px 40px #000b}
  .veil.side>.modal>h2.mHead{font-size:20px}
  .veil.side[data-k=inv]>.modal{width:min(690px,100%)}
  .veil.side[data-k=journal]>.modal{width:min(780px,100%)}
  .veil.side .jrn{box-sizing:border-box;max-height:calc(100vh - var(--topH,44px) - var(--hudH,170px) - 16px)}
}
@media (prefers-reduced-motion:reduce){.veil,.veil>.modal,.modal.helpOn .mHelp{animation:none!important}}

/* ---------- 4. life ---------- */
/* health: the fill slides, a pale tail of the lost part follows it after ~0.4 s */
#vbars .bar>i{z-index:1;transition:width .16s linear}
#vbars .bar>span{z-index:2}
#hpbar>.trail{position:absolute;left:0;top:0;bottom:0;display:block;z-index:0;text-decoration:none;background:linear-gradient(180deg,#fff8e6,#e9d3a8);opacity:.8;transition:width .45s cubic-bezier(.3,0,.2,1) .4s}
#xpbar>i{transition:width .3s ease-out}
/* gold: a short flash when it grows */
#goldv{display:inline-block}
#goldv.up{animation:gUp .6s ease-out}
@keyframes gUp{0%{color:#fff;text-shadow:0 0 10px #ffd24a,0 0 2px #fff;transform:scale(1.12)}100%{transform:none}}
/* buttons give a little under the finger */
.btn,.ab,.it,.ccard{transition:transform .06s ease-out,filter .12s}
.btn:active:not(:disabled){transform:translateY(1px) scale(.97)}
#hud .ab:active,#hud .it:active{transform:scale(.95)}
#hudBtns>button:active,.dia:active{transform:rotate(45deg) scale(.92)!important}
/* the toast slides down a little */
#toast{transform:translate(-50%,-10px);transition:opacity .3s,transform .3s cubic-bezier(.2,.8,.3,1)}
#toast.on{transform:translate(-50%,0)}
#tip:not([hidden]){animation:tipIn .1s ease-out}
@keyframes tipIn{from{opacity:0}}
@media (prefers-reduced-motion:reduce){#vbars .bar>i,#hpbar>.trail,#xpbar>i,#toast{transition:none}#goldv.up,#tip:not([hidden]){animation:none}.btn:active:not(:disabled),#hud .ab:active,#hud .it:active{transform:none}}

/* ---------- 5. the city window ---------- */
.cityTop{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 4px}
.cityTop .btn{margin:0!important}
.modal h3.cgT{margin:12px 0 6px;font:700 13px var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:#c9b37a;display:flex;align-items:center;gap:8px}
.modal h3.cgT::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,#6a4a2a,#0000)}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:6px}
.ccard{position:relative;display:flex;gap:9px;align-items:center;min-width:0;padding:6px 16px 6px 8px;text-align:left;color:var(--ink);cursor:pointer;
  background:linear-gradient(180deg,#2a1f15,#18110c);border:1px solid #4a3622;box-shadow:inset 0 1px 0 #ffffff0d,0 1px 0 #000}
.ccard:hover:not(:disabled),.ccard:focus-visible{border-color:var(--ember2);background:linear-gradient(180deg,#3a2716,#1d140d);outline:none}
.ccard:active:not(:disabled){transform:translateY(1px) scale(.98)}
.ccard:disabled{opacity:.5;cursor:not-allowed}
.ccard .cpt{position:relative;flex:none;width:46px;height:46px;background:radial-gradient(circle at 50% 35%,#3a2a1c,#0d0906);border:1px solid #3a2a18}
.ccard canvas{width:100%;height:100%;display:block;image-rendering:pixelated}
.ccard .cic{position:absolute;right:-5px;bottom:-5px;width:18px;height:18px;display:grid;place-items:center;font:700 10px/1 var(--f-ui);color:#1a1208;background:var(--rc,#bfae84);border:1px solid #000;transform:rotate(45deg)}
.ccard .cic>i{transform:rotate(-45deg);font-style:normal}
.ccard>span{min-width:0}
.ccard b{display:block;font:600 13px/1.2 var(--f-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ccard small{display:block;margin-top:1px;font-size:11.5px;line-height:1.2;color:var(--dim);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ccard.q{border-color:#c9a544;background:linear-gradient(180deg,#3a2a12,#1a120a);box-shadow:inset 0 0 0 1px #ffd24a2e,0 0 14px #ffb02e33}
.ccard .qm{position:absolute;top:2px;right:6px;font:800 16px/1 var(--f-display);font-style:normal;color:var(--gold);text-shadow:1px 1px 0 #000,0 0 8px #ffb02e}
.ccard .qm.a{color:#9fb3d6;text-shadow:1px 1px 0 #000}
@media (prefers-reduced-motion:no-preference){.ccard.q .qm{animation:qBob 1.6s ease-in-out infinite}}
@keyframes qBob{50%{transform:translateY(-2px)}}
@media (max-width:600px){.cgrid{grid-template-columns:1fr 1fr}.ccard .cpt{width:38px;height:38px}}
@media (max-width:480px){.cgrid{grid-template-columns:1fr}}
@media (min-width:901px) and (max-width:1300px) and (min-height:501px){#zones .btn small{display:none}}

/* ---------- 13 Oct (owner): the diamonds in a neat 3×2 grid ----------
   The bar holds six diamonds now (sleep, companions, dungeons / clan, auction, 1v1 mid — 52-mid1x1.js adds the last one), the old grid had
   cells for five: the sixth fell into the first free cell and was cut by the divider. A rotated square needs ~0.42 of its side as a gap. */
@media (min-width:1101px) and (min-height:501px){
  #hudBtns{display:grid!important;grid-template-columns:repeat(3,auto)!important;grid-template-rows:repeat(2,auto)!important;column-gap:clamp(14px,1.2vw,20px)!important;row-gap:clamp(14px,1.2vw,20px)!important;justify-content:center!important;align-content:center!important;padding:0 clamp(12px,1.1vw,18px)!important}
  #hudBtns>button{grid-area:auto!important}
}
@media (min-width:901px) and (max-width:1100px) and (min-height:501px){
  #dock>#hudBtns{grid-template-columns:repeat(2,28px)!important;grid-template-rows:repeat(3,28px)!important;gap:20px 16px!important;bottom:calc(100% + 130px)!important}
  #hudBtns>button{grid-area:auto!important}
}
@media (orientation:landscape) and (max-height:500px),(orientation:portrait) and (max-width:500px){
  #hudBtns{grid-template-columns:repeat(3,18px)!important;grid-template-rows:repeat(2,18px)!important;gap:9px!important;align-content:center!important}
  #hudBtns>button{grid-area:auto!important}
}

/* 13 Oct (owner): windows are dragged by their title */
#modals .mDrag{cursor:grab;touch-action:none}
#modals .modal.dragging{transition:none!important;box-shadow:0 18px 48px #000c,0 0 0 1px #ffd24a55}
#modals .modal.dragging .mDrag{cursor:grabbing}
#modals .modal.dragging *{user-select:none}