/* ====================================================================
   PoE game tooltips (1:1) — gems & uniques
   Рецепт из gem-proto.html (одобрен): реальные спрайты рамок poewiki,
   цвета пипеткой с poewiki, шрифт Fontin SmallCaps, иконка внизу.
   ==================================================================== */

@font-face{
  font-family:'Fontin SmallCaps';
  src:url('fonts/fontin-smallcaps.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
}

:root{
  --poett-grey:#7f7f7f;
  --poett-val:#ffffff;
  --poett-blue:#8888ff;
  --poett-gem:#1ba29b;
  --poett-uniq:#af6025;
  --poett-sep:#242424;
  --poett-mut:#cd2074;
  --poett-corr:#d20000;
}

/* ---------- всплывающий тултип ---------- */
.poett, .poett *, .poe-cell, .poe-icell{box-sizing:border-box;}
.poett{
  position:fixed; z-index:6000; width:440px; max-width:calc(100vw - 16px);
  background:rgba(0,0,0,0.88);
  box-shadow:0 22px 55px rgba(0,0,0,0.7);
  text-align:center; color:var(--poett-val);
  font-family:'Fontin SmallCaps','Alegreya SC',Georgia,serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;
  pointer-events:none;
  opacity:0; transition:opacity .08s linear;
}
.poett.is-on{opacity:1;}
.poett.-uniq{width:380px;}

.poett-hd{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background-repeat:no-repeat,no-repeat,repeat-x; background-color:#000;
}
.poett-hd.-gem{
  height:28px; padding:2px 32px;
  background-image:url('img/poe-hd-single.png'),url('img/poe-hd-single.png'),url('img/poe-hd-single.png');
  background-position:0% -306px, 100% -374px, 50% -340px;
}
.poett-hd.-uniq{
  height:48px; padding:3px 44px;
  background-image:url('img/poe-hd-double.png'),url('img/poe-hd-double.png'),url('img/poe-hd-double.png');
  background-position:0% -162px, 100% -270px, 50% -216px;
}
.poett-hd .n{font-weight:700; font-size:0.98rem; letter-spacing:0.02em; line-height:1.05;}
.poett-hd .b{font-size:0.9rem; line-height:1.05;}
.poett-hd.-gem .n{color:var(--poett-gem);}
.poett-hd.-uniq .n, .poett-hd.-uniq .b{color:var(--poett-uniq);}

.poett-bd{padding:0.42rem 0.9rem 0.6rem; line-height:1.14; overflow-y:auto;}
.poett-ln{font-size:0.86rem; line-height:1.24; margin:0;}
.poett-gap{height:0.45em;}
.poett-sep{height:1px; margin:0.42rem 6%; background:linear-gradient(90deg, transparent, var(--poett-sep) 16%, var(--poett-sep) 84%, transparent);}

.poett .td{color:var(--poett-grey);}
.poett .tv{color:var(--poett-val);}
.poett .tm{color:var(--poett-blue);}
.poett .tg{color:var(--poett-gem);}
.poett .tu{color:var(--poett-uniq);}
.poett .tx{color:var(--poett-mut);}
.poett .tc{color:var(--poett-corr);}
.poett-ln.-g{color:var(--poett-gem); font-size:0.86rem; line-height:1.28; margin:0.1rem 0.15rem;}
.poett-ln.-h{color:var(--poett-grey); font-style:italic; font-size:0.8rem; line-height:1.3; margin-top:0.12rem;}
.poett-ln.-f{color:var(--poett-uniq); font-style:italic; font-size:0.85rem; line-height:1.3; margin:0.15rem 0.2rem 0.1rem;}
.poett-ln.-w{color:var(--poett-grey); font-size:0.8rem; opacity:0.9; line-height:1.18;}

.poett-gicon{position:relative; width:60px; height:60px; margin:0.7rem auto 0.75rem; display:grid; place-items:center;
  background:radial-gradient(closest-side, rgba(27,162,155,0.12), transparent 72%);}
.poett-gicon::before{content:""; position:absolute; inset:2px; border-radius:50%;
  box-shadow:0 0 0 1px rgba(27,162,155,0.28), inset 0 0 10px rgba(0,0,0,0.6);}
.poett-gicon img{width:50px; height:50px; filter:drop-shadow(0 2px 6px rgba(0,0,0,0.7));}
.poett-uicon{width:84px; height:84px; margin:0.7rem auto 0.5rem; display:grid; place-items:center;}
.poett-uicon img{max-width:100%; max-height:100%; filter:drop-shadow(0 4px 12px rgba(0,0,0,0.8));}

/* мобильный режим: шторка снизу, скролл внутри */
.poett.-sheet{
  left:50% !important; top:auto !important; bottom:10px; transform:translateX(-50%);
  pointer-events:auto; max-height:72vh; display:flex; flex-direction:column;
}
.poett.-sheet .poett-bd{overscroll-behavior:contain;}
.poett-close{
  position:absolute; top:2px; right:2px; z-index:2;
  width:30px; height:30px; border:0; background:rgba(0,0,0,0.55); color:#c8aa6e;
  font-size:16px; line-height:1; cursor:pointer; display:none;
}
.poett.-sheet .poett-close{display:block;}

/* ---------- триггеры в тексте ---------- */
.poe-t{
  cursor:help;
  border-bottom:1px dotted rgba(200,170,110,0.55);
  transition:border-color .12s;
}
.poe-t:hover, .poe-t:focus-visible{border-bottom-style:solid; border-bottom-color:rgba(200,170,110,0.9); outline:none;}

/* ---------- сокет-группы (линки) ---------- */
.poe-links{display:flex; flex-direction:column; gap:12px; margin:18px 0 4px;}
.poe-links-cap{
  font-family:'Alegreya Sans',sans-serif; font-size:0.78rem; letter-spacing:0.16em;
  text-transform:uppercase; color:#6f6350; margin-bottom:2px;
}
.poe-lrow{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.poe-slot{min-width:104px; text-align:right;
  font-family:'Cormorant SC','Cormorant',serif; font-weight:700; font-size:0.95rem;
  color:#c8aa6e; line-height:1.1;}
.poe-slot small{display:block; font-family:'Alegreya Sans',sans-serif; font-weight:400;
  font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase; color:#6f6350;}
.poe-cells{display:flex; align-items:center;}
.poe-cell{
  position:relative; width:40px; height:40px; margin-right:9px;
  background:radial-gradient(circle at 50% 42%, #171310, #0a0806 78%);
  border:2px solid #3a3128; border-radius:9px;
  display:grid; place-items:center; cursor:help;
}
.poe-cell:last-child{margin-right:0;}
.poe-cell + .poe-cell::before{
  content:""; position:absolute; left:-11px; top:50%; margin-top:-2px;
  width:11px; height:4px; background:#5d5347; box-shadow:0 1px 0 rgba(0,0,0,0.6);
}
.poe-cell.-r{border-color:#8e2b22; box-shadow:0 0 7px rgba(201,60,44,0.30), inset 0 0 5px rgba(201,60,44,0.22);}
.poe-cell.-g{border-color:#3f7a33; box-shadow:0 0 7px rgba(80,163,63,0.30), inset 0 0 5px rgba(80,163,63,0.22);}
.poe-cell.-b{border-color:#2f4d92; box-shadow:0 0 7px rgba(75,110,197,0.32), inset 0 0 5px rgba(75,110,197,0.24);}
.poe-cell img{width:30px; height:30px; pointer-events:none;}
.poe-cell:hover, .poe-cell:focus-visible{outline:none; filter:brightness(1.25);}

/* ---------- ряд уников (чит-лист) ---------- */
.poe-items-row{display:flex; flex-wrap:wrap; gap:9px; margin-top:12px;}
.poe-icell{
  min-width:52px; height:56px; padding:4px 7px;
  background:radial-gradient(circle at 50% 40%, #16110c, #0a0806 80%);
  border:1px solid #4a3a21; border-radius:7px;
  display:grid; place-items:center; cursor:help;
}
.poe-icell img{max-height:46px; max-width:64px; pointer-events:none; filter:drop-shadow(0 2px 5px rgba(0,0,0,0.8));}
.poe-icell:hover, .poe-icell:focus-visible{outline:none; border-color:#af6025; filter:brightness(1.2);}

@media (max-width:560px){
  .poe-slot{min-width:0; width:100%; text-align:left;}
  .poe-slot small{display:inline; margin-left:6px;}
  .poe-lrow{gap:6px;}
  .poe-cell{width:36px; height:36px;}
  .poe-cell img{width:27px; height:27px;}
}