/* 19 Oct (owner): the hover tips of the game screen (js/client/74-tips.js), the temperaments «coming later», «Решения» and «Хроника» in the main menu */

/* the plaque: as wide as its text (the other tips keep their 280 px) */
#tip.ht{width:auto;min-width:0;max-width:290px}
#tip .htT{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--ember2);font:700 15px/1.2 var(--f-ui)}
#tip .htT b{font-weight:700}
#tip .htT kbd{flex:none;font:600 11px/1 var(--f-ui);color:var(--ink);background:#0008;border:1px solid var(--line2);padding:3px 6px 2px;border-radius:3px}
#tip .htD{color:var(--ink);margin-top:3px}
#tip .htT+.htD{margin-top:4px}
#tip .htD:first-child{margin-top:0}
#tip .htS{margin-top:5px;color:var(--dim)}
#tip .htS b{color:var(--ink);font-weight:600}
#tip .htS.on b{color:var(--good)}
#tip .htL{margin-top:5px;color:var(--gold);font-weight:600}

/* Greedy and Reckless: in sight, dimmed, with the lock of the gradual interface (56-unlock.js) */
#mood .btn.soon{position:relative;opacity:.5;filter:grayscale(.7);cursor:not-allowed}
#mood .btn.soon:hover{opacity:.65}
#mood .btn.soon .ulL{right:2px;top:50%;bottom:auto;transform:translateY(-50%) scale(.8);border:0;background:none}

/* «Решения» and «Хроника» in the side panel of the main menu */
#mvSide .mvFeed{font-size:13px;line-height:1.45}
#mvSide .mvFeed p{margin:0 0 5px;color:var(--dim);font-size:13px;line-height:1.45;max-width:none}
#mvSide .mvFeed p.mvFeedP{color:var(--ink);margin-bottom:10px}
#mvSide .mvFeed p b{color:var(--ink);font-weight:500}
#mvSide .mvFeed .t{opacity:.6;margin-right:4px}
#mvSide .mvFeed .g{color:var(--gold)}
#mvSide .mvFeed .r{color:var(--bad)}
#mvSide .mvFeed .v{color:var(--xp)}
#mvSide .mvFeed .o{color:var(--ember2)}

/* 19 Oct (owner, Android): «Особое предложение» is taller than a phone: ✕ stays at the top right while it scrolls */
#ofX{position:sticky;top:0;float:right;z-index:4;margin:-8px -10px 0 8px}
.veil>.modal:has(.ofWrap){width:min(760px,100%);box-sizing:border-box}   /* 96vw stuck out past the right edge of a phone */

/* 19 Oct (owner, Android and iPhone): the six round buttons of the bar stood crooked (the stagger of the old diamonds): a straight 3 x 2 grid in the middle */
@media (orientation:landscape) and (max-height:500px),(orientation:portrait) and (max-width:500px){
  #hudBtns{grid-template-columns:repeat(3,22px)!important;grid-template-rows:22px 22px!important;gap:5px 7px!important;padding:0 6px!important;align-content:center!important;justify-content:center!important}
  #hudBtns>button{grid-area:auto!important;width:22px!important;height:22px!important;margin:0!important}
  #hudBtns>button svg{width:13px!important;height:13px!important}
}
/* the craft of the companions on a phone: the ring fits the width and «Вставить повторки» / «Скрафтить» stay under it, not under the text */
@media (max-width:980px){
  .cbody{grid-auto-rows:max-content}
  .cmid{overflow:visible!important;min-height:auto!important;padding:12px 0 16px}
  .cmerge{width:100%;gap:10px}
  .cring{width:min(80vw,46vh,430px)}
  .cgr{flex-wrap:wrap;justify-content:center;gap:5px;padding:0 8px}
  .cgr button{padding:6px 10px;font-size:13px}
  .cmerge>div[style*="display:flex"]{flex-wrap:wrap;justify-content:center;padding:0 10px}
}
/* the top bar of a phone: the menu ☰ always fits; the online chip gives way first (it says only «● 3» there) */
@media (orientation:landscape) and (max-height:500px),(orientation:portrait) and (max-width:500px){
  #top>*{flex-shrink:0}
  #top>#online{flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
/* the commands of a phone stood on the XP bar: a little lower */
@media (orientation:portrait) and (max-width:500px){
  #hud>#right{padding-bottom:2px!important}
}
/* the narrowest phones (360 px): the round buttons a little smaller so the commands do not cover them */
@media (orientation:portrait) and (max-width:380px){
  #hudBtns{grid-template-columns:repeat(3,18px)!important;grid-template-rows:20px 20px!important;gap:4px 3px!important;padding:0 3px!important}
  #hudBtns>button{width:18px!important;height:18px!important}
  #hudBtns>button svg{width:11px!important;height:11px!important}
}
/* 19 Oct (owner, phone): the lower row of the bar uses its whole width: bigger gear slots, the round buttons, and the commands stretched to the right edge */
@media (orientation:portrait) and (max-width:500px){
  #hud{--itS:clamp(26px,7.6vw,34px);--hbS:clamp(19px,5.6vw,26px);--hbG:clamp(3px,1.2vw,6px)}
  #dock>#items{grid-template-columns:repeat(3,var(--itS))!important;grid-template-rows:var(--itS) var(--itS)!important;grid-auto-rows:var(--itS)!important;gap:3px!important}
  #hud #items .it{width:var(--itS)!important;height:var(--itS)!important}
  #hud .it .e{font-size:8px!important}
  #hudBtns{grid-template-columns:repeat(3,var(--hbS))!important;grid-template-rows:var(--hbS) var(--hbS)!important;gap:var(--hbG)!important;padding:0 var(--hbG)!important}
  #hudBtns>button{width:var(--hbS)!important;height:var(--hbS)!important}
  #hudBtns>button svg{width:calc(var(--hbS) * .6)!important;height:calc(var(--hbS) * .6)!important}
  /* the commands: from the round buttons to the right edge, three equal columns */
  #hud #cmds{width:calc(100vw - 3 * var(--itS) - 3 * var(--hbS) - 4 * var(--hbG) - 26px)!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:3px!important}
  #hud #cmds .btn{min-width:0!important;height:calc(var(--itS) * .66)!important;font-size:clamp(8px,2.3vw,11px)!important;padding:0 1px!important;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis}
}