/* HUD layout (reference mockup): [voice][bag][menu] in one row top-right, compact decree under the pills.
   Loaded after cult-ui.css; the `html` prefix beats every media-query override there. */
html .game .menu-button,html .game .inventory-button,html .game .voice-button{
  top:calc(env(safe-area-inset-top) + 12px);width:42px;height:42px;border-radius:13px;display:grid;place-items:center;padding:0;
  background:linear-gradient(140deg,#2a221ee8,#100e10ea);border:1px solid #d8a95a99;color:#ffd77a;
  box-shadow:0 4px 16px #0008,inset 0 1px #f0c36f26}
html .game .menu-button{right:12px}
html .game .inventory-button{right:62px}
html .game .voice-button{right:112px}
html .game .voice-button.active{background:linear-gradient(140deg,#5a4217,#2b1f0b);border-color:#ffd98a}
html .game .quests-button{display:none}
html .game .menu-button .icon,html .game .inventory-button .icon,html .game .voice-button svg{
  width:23px;height:23px;color:#ffd77a;filter:drop-shadow(0 0 3px #f4c75d44)}
html .game .top-left{max-width:calc(100% - 175px)}
html .game .decree{
  top:calc(env(safe-area-inset-top) + 64px);left:12px;transform:none;width:min(calc(100% - 24px),288px);max-width:288px;
  flex-direction:row;align-items:center;text-align:left;min-height:0;padding:7px 10px;gap:9px;cursor:pointer;pointer-events:auto;
  background:linear-gradient(145deg,#231c1ae6,#0d0d10ea);box-shadow:0 4px 14px #0007}
html .game .decree-seal{width:30px;height:32px;border-radius:9px}
html .game .decree-seal .icon{width:20px;height:20px}
html .game .decree-topline{font-size:11px}
html .game .decree strong{font-size:10.5px;line-height:1.3}
html .game .decree-progress{margin-top:4px;height:4px}
html .game .call-panel{top:calc(env(safe-area-inset-top) + 124px);right:12px;left:auto}
html .game .action .action-glyph .icon{width:30px;height:30px;color:#ffd77a}
html .game .small-action .action-glyph .icon{width:26px;height:26px}
@media(max-width:370px){
  html .game .menu-button,html .game .inventory-button,html .game .voice-button{width:38px;height:38px}
  html .game .inventory-button{right:56px}
  html .game .voice-button{right:100px}
  html .game .top-left{max-width:calc(100% - 158px)}
  html .game .decree{width:min(calc(100% - 24px),270px)}
}
@media(max-height:620px){html .game .decree{top:calc(env(safe-area-inset-top) + 56px)}}

/* v2: smaller, lighter HUD for portrait phones; raster gold icons from icons/*.webp */
.hud-ico{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;user-select:none;-webkit-user-drag:none}
html .game .menu-button,html .game .inventory-button,html .game .voice-button{width:38px;height:38px;border-radius:12px;padding:5px}
html .game .menu-button{right:10px}
html .game .inventory-button{right:54px}
html .game .voice-button{right:98px}
html .game .top-left{max-width:calc(100% - 150px);transform-origin:left top;transform:scale(.88)}
html .game .decree{top:calc(env(safe-area-inset-top) + 54px);left:12px;width:fit-content;max-width:268px;padding:5px 10px 6px;gap:0;
  background:linear-gradient(90deg,#0d0b0c8c,#0d0b0c4d);border:0;border-left:2px solid #e2ac5dcc;border-radius:4px 10px 10px 4px;box-shadow:none}
html .game .decree-main{flex:none}
html .game .decree-topline{font-size:10px;gap:14px}
html .game .decree strong{font-size:10px;line-height:1.25;text-shadow:0 1px 3px #000}
html .game .decree-progress{margin-top:3px;height:3px}
html .game .call-panel{top:calc(env(safe-area-inset-top) + 100px)}
html .game .joystick-zone{width:104px;height:104px}
html .game .stick-knob{width:44px;height:44px}
html .game .action{width:72px;height:72px;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
html .game #act{background:none;border:0;box-shadow:none;position:relative}
html .game #act .action-glyph{width:72px;height:72px;display:block;filter:drop-shadow(0 3px 8px #000a)}
html .game #act b{position:absolute;bottom:-9px;left:50%;transform:translateX(-50%);font-size:9px;background:#120f0fd0;border:1px solid #c69a4f88;border-radius:8px;padding:1px 7px;color:#ffe095;white-space:nowrap}
html .game .small-action{width:52px;height:52px}
html .game .small-action .action-glyph{height:24px}
html .game .small-action .action-glyph .icon{width:22px;height:22px}
html .game .small-action b{font-size:7.5px}
/* «МАХАТЬ» wears the same label pill as «ПОКЛОН», hanging just under the round button. */
html .game #wave{position:relative;overflow:visible;justify-content:center}
html .game #wave .action-glyph{height:auto}
html .game #wave b{position:absolute;bottom:-9px;left:50%;transform:translateX(-50%);font-size:9px;background:#120f0fd0;border:1px solid #c69a4f88;border-radius:8px;padding:1px 7px;color:#ffe095;white-space:nowrap;letter-spacing:.02em}
@media(max-width:370px){
  html .game .menu-button,html .game .inventory-button,html .game .voice-button{width:36px;height:36px}
  html .game .inventory-button{right:51px}
  html .game .voice-button{right:92px}
  html .game .top-left{max-width:calc(100% - 140px)}
}

/* Entry screen: centred copy, softer type (rounded/serif instead of heavy grotesque caps). */
.entry-screen .brand{text-align:center;margin-inline:auto}
.entry-screen .brand h1{font-family:'Palatino Linotype',Palatino,'Book Antiqua',Georgia,serif;font-weight:700;letter-spacing:.04em;text-shadow:0 2px 18px #3c1b06,0 1px 2px #0008}
.entry-screen .brand p{font-family:Georgia,'Palatino Linotype',serif;font-style:italic;font-weight:400;letter-spacing:.01em;opacity:.92}
.entry-screen .join-card{text-align:center}
.entry-screen .join-card label{display:block;text-align:center;font-family:Georgia,'Palatino Linotype',serif;font-weight:600;letter-spacing:.01em}
.entry-screen .join-card input{text-align:center;font-weight:500}
.entry-screen .choice-head{display:flex;justify-content:center;width:100%;text-align:center;font-weight:600;letter-spacing:.14em;font-size:13px;opacity:.9}
.entry-screen .avatar-pick small{font-weight:500}
.entry-screen .join-button{display:flex;justify-content:center;align-items:center;gap:12px;text-align:center;font-family:Georgia,'Palatino Linotype',serif;font-weight:700;letter-spacing:.07em}
.entry-screen .subtext{text-align:center;font-family:Georgia,serif;font-style:italic}

/* Entry background: dark golden temple hall (public/icons/entry-bg.webp, 56 KB). */
.entry-screen{background:linear-gradient(180deg,#0a0707aa 0%,#0a070700 28%,#0a070700 62%,#0a0707cc 100%),url('/icons/entry-bg.webp') center top/cover no-repeat,#100b0b}
.entry-screen .join-card{background:#130e0edb;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}

/* Entry layout (same on every phone/browser): the background is drawn
   `center top / cover`, so its scale is max(100vw*1.776, 100dvh) (1.776 =
   entry-bg.webp height/width). The title block is placed at a fixed fraction
   of that height (lantern level), and the card follows it with a fixed gap,
   so a taller browser viewport only adds floor below the card instead of a
   gap between title and card. Capped for short or wide screens. */
@media(min-height:540px){
  .entry-screen{justify-content:flex-start;gap:10px;
    padding-top:calc(env(safe-area-inset-top) + 21vh);
    padding-top:calc(env(safe-area-inset-top) + max(8px,min(.2135*max(177.6vw,100dvh),100dvh - 450px,30dvh)));
    padding-bottom:calc(env(safe-area-inset-bottom) + 12px)}
  .entry-screen .brand-mark{font-size:min(7.6vw,36px)}
  .entry-screen .brand h1{font-size:min(8.65vw,40px);margin:6px 0}
  .entry-screen .brand p{font-size:min(3.5vw,16px)}
  .entry-screen .join-card{margin-top:30px}
}
/* Compact login card: smaller field, gender tiles and button. */
.entry-screen .join-card{padding:15px 16px;gap:9px;border-radius:22px}
.entry-screen .join-card label{font-size:clamp(15px,4vw,18px)}
.entry-screen .join-card input{padding:11px 14px;border-radius:14px}
.entry-screen .choice-head{font-size:12px}
.entry-screen .avatar-pick{min-height:74px;border-radius:15px;gap:2px}
.entry-screen .avatar-pick.selected{border-width:2px}
.entry-screen .gender-icon{font-size:38px}
.entry-screen .avatar-pick small{font-size:15px}
.entry-screen .join-button{min-height:50px;border-radius:16px;font-size:clamp(15px,4.2vw,19px)}

/* The Eye of Igor refuses its own name with an in-lore error, not a generic tooltip. */
.entry-screen .join-card input.igor-name-denied{
  border-color:#ff7862;
  box-shadow:0 0 0 2px #e35a3a5c,0 0 21px #c8472862;
  background:#35201e;
}
.entry-screen .join-card #join-error.igor-name-denied{
  display:block;
  padding:11px 13px;
  margin:1px 0;
  border:1px solid #d7a04a;
  border-left:3px solid #f2ba5a;
  border-radius:11px;
  background:linear-gradient(100deg,#4e241ff0,#2a1a16ec);
  color:#ffe3b0;
  line-height:1.45;
  font-size:13px;
  font-weight:650;
  text-align:center;
  box-shadow:0 4px 15px #0006;
}
.entry-screen .join-card #join-error.igor-name-denied::before{
  content:'✦ ГЛАЗ ИГОРЯ ✦';
  display:block;
  margin-bottom:7px;
  color:#ffcb71;
  font-size:10px;
  font-weight:900;
  letter-spacing:.13em;
}
@media (prefers-reduced-motion:no-preference){
  .entry-screen .join-card #join-error.igor-name-denied{
    animation:igor-rejection-appear .3s ease-out;
  }
  @keyframes igor-rejection-appear{
    from{opacity:.45;transform:translateY(-5px)}
    to{opacity:1;transform:translateY(0)}
  }
}

/* Reward chip under the decree ("Глубокий поклон +6"); never overlaps Igor's speech at the bottom. */
html .game .reward-chip{position:absolute;z-index:8;left:12px;top:calc(env(safe-area-inset-top) + 104px);
  padding:4px 11px;border-radius:999px;border:1px solid #f3cf78;background:#2a1d10e6;color:#ffe7a6;
  font-size:12px;font-weight:800;letter-spacing:.03em;white-space:nowrap;pointer-events:none;
  box-shadow:0 2px 10px #0008,0 0 12px #e8b44a44;opacity:0;transform:translateY(-6px);transition:opacity .2s,transform .2s}
html .game .reward-chip.show{opacity:1;transform:none}
@media(max-height:620px){html .game .reward-chip{top:calc(env(safe-area-inset-top) + 104px)}}

/* "Послание культа": a small plain pill ABOVE Igor's speech frame, so the two never overlap. */
html .game .cult-note{position:absolute;z-index:8;left:50%;bottom:calc(env(safe-area-inset-bottom) + 272px);
  transform:translate(-50%,6px);max-width:min(300px,86vw);padding:5px 12px;border-radius:999px;
  background:#1d140cd9;border:1px solid #e8bc6655;color:#f5e3bb;font-size:12px;font-weight:600;line-height:1.3;
  text-align:center;pointer-events:none;opacity:0;transition:opacity .2s,transform .2s}
html .game .cult-note.show{opacity:1;transform:translate(-50%,0)}
@media(max-height:620px){html .game .cult-note{bottom:calc(env(safe-area-inset-bottom) + 225px)}}

/* The two-line faith + personal-gifts HUD must not intersect Igor's decree. */
html .game .decree{top:calc(env(safe-area-inset-top) + 83px)}
html .game .reward-chip{top:calc(env(safe-area-inset-top) + 136px)}
@media(max-height:620px){
  html .game .decree{top:calc(env(safe-area-inset-top) + 79px)}
  html .game .reward-chip{top:calc(env(safe-area-inset-top) + 132px)}
}

/* Faith + gifts pill and the «В МИРЕ» pill share one height. */
html .game .top-left{align-items:stretch}
html .game .score,html .game .online{box-sizing:border-box;height:42px;min-height:42px;padding-top:0;padding-bottom:0}
html .game .score{justify-content:center;gap:0}
html .game .score .score-faith{gap:4px;line-height:1.05}
html .game .score .score-faith .icon{width:14px;height:14px}
html .game .score b#faith{font-size:16px}
html .game .score .score-faith span{font-size:8px;display:inline}
html .game .score .score-gifts{margin-left:18px;line-height:1.05}
html .game .score .score-gifts b{font-size:11px}
html .game .score .score-gifts span{font-size:8px;display:inline} /* narrow phones used to hide every .score span */


/* Robe look picker on the start screen: three swatches per gender. */
.entry-screen .variant-row{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:2px}
.entry-screen .variant-pick{display:flex;flex-direction:column;align-items:center;gap:5px;min-height:62px;padding:8px 4px;border:1px solid #87684d;border-radius:13px;background:#2a1f1ee6;color:#f3e7d4;font:inherit}
.entry-screen .variant-pick.selected{border:2px solid #ffe087;background:linear-gradient(145deg,#5f4524,#33241a)}
.entry-screen .variant-dot{width:26px;height:26px;border-radius:50%;background:var(--swatch);border:2px solid #e0b04a;box-shadow:0 2px 6px #0007}
.entry-screen .variant-pick small{font-size:12px;line-height:1.1}
@media (max-height:660px){
  .entry-screen .avatar-pick{min-height:56px}
  .entry-screen .gender-icon{font-size:28px}
  .entry-screen .variant-pick{min-height:48px;padding:5px 4px;gap:3px}
  .entry-screen .variant-dot{width:20px;height:20px}
}
/* Idle kick notice: tappable to come back. */
.game .connection.idle-kicked{pointer-events:auto;cursor:pointer;white-space:normal;max-width:min(86vw,320px);line-height:1.45}
/* Name tags are placed with a transform (no layout per frame). */
.game .name-tag{left:0;top:0;will-change:transform}