/* WR-META 2.0 — shared game icon system (items, spells, runes, builds).
   Source geometry: NEW/STORY/anons.tpl. No legacy CSS classes or Font Awesome.
   One implementation for the entire theme; dimensions can be adjusted through
   --wrm2-game-size for local size variants when needed. */

.wrm2-game-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  isolation: isolate;
  min-width: 0;
}

.wrm2-game-icon {
  --wrm2-game-tone: #60f0ff;
  --wrm2-game-tone-outer: rgb(96 240 255 / 60%);
  --wrm2-game-size: 60px;
  position: relative;
  display: inline-flex;
  flex: 0 0 var(--wrm2-game-size);
  width: var(--wrm2-game-size);
  min-width: 0;
  margin: 14px;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: help;
  z-index: 1;
  outline-offset: 3px;
}

/* Map existing DLE extra-field values to our own component tokens. */
:is(.wrm2-game-icon,.champ-rune-game-entry.is-keystone,.wrm2-rune-intro-piece):is([data-tone="red"],[data-tone$="-red"]) {
  --wrm2-game-tone: var(--wrm2-game-red);
  --wrm2-game-tone-outer: rgb(255 28 92 / 60%);
}
:is(.wrm2-game-icon,.champ-rune-game-entry.is-keystone,.wrm2-rune-intro-piece):is([data-tone="orage"],[data-tone$="-orage"],[data-tone="orange"],[data-tone$="-orange"]) {
  --wrm2-game-tone: var(--wrm2-game-orange);
  --wrm2-game-tone-outer: rgb(255 170 56 / 60%);
}
:is(.wrm2-game-icon,.champ-rune-game-entry.is-keystone,.wrm2-rune-intro-piece):is([data-tone="green"],[data-tone$="-green"]) {
  --wrm2-game-tone: var(--wrm2-game-green);
  --wrm2-game-tone-outer: rgb(43 255 101 / 60%);
}
:is(.wrm2-game-icon,.champ-rune-game-entry.is-keystone,.wrm2-rune-intro-piece):is([data-tone="blue"],[data-tone$="-blue"]) {
  --wrm2-game-tone: var(--wrm2-game-blue);
  --wrm2-game-tone-outer: rgb(96 147 255 / 60%);
}
:is(.wrm2-game-icon,.champ-rune-game-entry.is-keystone,.wrm2-rune-intro-piece):is([data-tone="white"],[data-tone$="-white"]) {
  --wrm2-game-tone: #ffffff;
  --wrm2-game-tone-outer: rgb(255 255 255 / 60%);
}

.wrm2-game-icon__frame {
  position: relative;
  display: block;
  width: var(--wrm2-game-size);
  height: var(--wrm2-game-size);
  flex: 0 0 var(--wrm2-game-size);
  padding: 1px;
  background: var(--wrm2-game-tone);
  line-height: 0;
  z-index: 1;
}
/* DLE image xfields may wrap the img in a highslide anchor (when a thumb exists).
   Preserve the one icon-frame geometry and do not activate a gallery on hover. */
.wrm2-game-icon__frame > a.highslide {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.wrm2-game-icon__frame img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  background: var(--wrm2-canvas2);
  vertical-align: bottom;
}

/* Two separately clipped layers reproduce the NEW-colored 1px frame. */
.wrm2-game-icon--item .wrm2-game-icon__frame,
.wrm2-game-icon--item .wrm2-game-icon__frame img {
  clip-path: polygon(20% 0,100% 0,100% 80%,80% 100%,0 100%,0 20%);
}
.wrm2-game-icon--item:where(:hover,:focus-visible) .wrm2-game-icon__frame {
  filter: brightness(1.14);
}

/* Rune: shared colored rings and exact full-size geometry in /items/ and guides.
   Keystone outer frame = 62px content + 8px padding = 70px; minors = 60px.
   Compact Community Builds/profile variants keep their separate, existing sizes. */
.wrm2-game-icon--rune {
  --wrm2-rune-keystone-size: 62px;
  --wrm2-rune-frame-padding: 8px;
  --wrm2-rune-secondary-size: 60px;
  --wrm2-game-size: var(--wrm2-rune-keystone-size);
  --wrm2-game-tone: #cccccc;
  --wrm2-game-tone-outer: #cccccc;
  margin: 9px;
}
.wrm2-game-icon--rune .wrm2-game-icon__frame {
  box-sizing: content-box;
  width: var(--wrm2-game-size);
  height: var(--wrm2-game-size);
  flex-basis: var(--wrm2-game-size);
  padding: 4px;
  border-radius: 50%;
  background: var(--wrm2-canvas2);
}
.wrm2-game-icon--rune .wrm2-game-icon__frame img {
  border: 3px solid var(--wrm2-game-tone);
  border-radius: 50%;
  box-shadow: 0 0 0 2px #1e222d, 0 0 0 4px var(--wrm2-game-tone-outer);
}

/* Compact guides: one frame size for items, keystone, spells and skills (52px).
   Rune rings retain the exact same component design; secondary runes use 38px
   through the context modifier below. The 64px label slot never moves a frame. */
.wrm2-game-icon--compact{--wrm2-game-size:52px;--wrm2-game-slot:64px;flex:0 0 var(--wrm2-game-slot);width:var(--wrm2-game-slot);margin:0}
.wrm2-game-icon--compact.wrm2-game-icon--rune{--wrm2-game-size:52px;margin:0}
.wrm2-game-icon--compact.wrm2-game-icon--rune .wrm2-game-icon__frame{box-sizing:border-box;width:var(--wrm2-game-size);height:var(--wrm2-game-size);flex-basis:var(--wrm2-game-size);padding:3px}
.wrm2-game-icon--compact.wrm2-game-icon--rune .wrm2-game-icon__frame img{border-width:2px;box-shadow:0 0 0 1px #1e222d,0 0 0 3px var(--wrm2-game-tone-outer)}
.wrm2-game-icon--compact .wrm2-game-icon__label{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;width:100%;height:31px;margin-top:5px;line-height:10.33px;overflow-wrap:anywhere;font-weight:900;letter-spacing:.005em;font-size:13px}
.wrm2-game-icon--compact .wrm2-game-icon__badge{top:0px;right:0px;padding:3px;font-size:9px}
.wrm2-game-icon__label {display:block;width:100%;margin-top:5px;color:var(--wrm2-muted);font-size:11px;line-height:1.4;white-space:normal;overflow-wrap:normal;word-break:normal;hyphens:none;text-align:center;text-wrap:balance}
.wrm2-game-icon__badge {
  position: absolute;
  top: 3px;
  right: 3px;
  z-index: 2;
  padding: 4px 4px;
  color: #09120d;
  background: var(--wrm2-game-tone);
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
  pointer-events: none;
}

/* In the default flow, negative margins make connector edges touch icon frames. */
.wrm2-game-join {
  position: relative;
  z-index: 0;
  display: flex;
  flex: 0 0 35px;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  margin: 28px -15px 0;
  border: 1px solid var(--wrm2-mint);
  box-shadow: rgba(28, 251, 140, 0.15) 0 0 20px;
  color: var(--wrm2-mint);
  font-size: 20px;
  font-weight: 100;
  line-height: 1;
}

.wrm2-game-icon__tooltip[hidden] { display: none; }
.wrm2-game-tooltip-popover {
  position: fixed;
  z-index: 9999;
  width: min(390px,calc(100vw - 20px));
  max-height: min(70dvh,500px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 12px;
  pointer-events: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--wrm2-mint) var(--wrm2-panel2);
}
/* Match the slim scrollbars used by tables and other scrollable UI Kit panels. */
.wrm2-game-tooltip-popover::-webkit-scrollbar { width: 8px; height: 8px; }
.wrm2-game-tooltip-popover::-webkit-scrollbar-track { background: var(--wrm2-panel2); }
.wrm2-game-tooltip-popover::-webkit-scrollbar-thumb { background: var(--wrm2-mint); border-radius: 0; }
.wrm2-game-tooltip-popover::-webkit-scrollbar-thumb:hover { background: #75ffb7; }
/* Restrained entrance animation shared with champion card popovers. The delay
   belongs to pointer hover handlers, not to keyboard or touch navigation. */
@keyframes wrm2-tooltip-appear{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.wrm2-tooltip-surface:not([hidden]){animation:wrm2-tooltip-appear 180ms cubic-bezier(.2,.7,.2,1) both}
@media(prefers-reduced-motion:reduce){.wrm2-tooltip-surface:not([hidden]){animation:none}}
.wrm2-game-tooltip-popover[hidden] { display: none; }
.wrm2-game-tooltip-content img{vertical-align:middle}
/* Inline DLE smile/stat-icon replacements retain their own intrinsic shape,
   not the wide size used by explanatory screenshots and editorial illustrations. */
.wrm2-game-tooltip-content img:is(.emoji,.smile,.smiles,.emoticon,.wrm2-inline-icon) { display:inline-block; width:24px; height:24px; max-width:none; object-fit:contain; margin-inline:2px; }
.wrm2-game-tooltip-content img.wrm2-game-emoji--stat { width:16px; height:16px; margin-inline:1px; }
.wrm2-game-skill-description{display:flow-root;min-width:0}
.wrm2-game-tooltip-popover .wrm2-game-skill-description{margin-top:10px}
/* Skill illustrations share the 40px visual size requested for ability icons, floated left beside the
   ability text. Only the large illustrated icons use these rules; inline DLE
   icons retain their shared 24px/16px game-emoji treatment above. */
.wrm2-game-skill-description img.wrm2-game-skill-illustration{float:left;clear:left;display:block;width:40px;height:40px;max-width:none;object-fit:cover;box-sizing:border-box;margin:2px 15px 9px 0;border:1px solid var(--wrm2-skill-illustration-border,var(--wrm2-mint));vertical-align:top}
/* All ability resources use the shared visual heading, with no label/value wraps.
   Rare extremely long values can scroll horizontally instead of breaking. */
.wrm2-game-tooltip-popover .wrm2-game-skill-resources{display:flex;flex-wrap:nowrap;align-items:baseline;gap:15px;max-width:100%;overflow-x:auto;white-space:nowrap;scrollbar-width:thin;font-style:normal}
.wrm2-game-tooltip-popover .wrm2-game-skill-cost{display:inline-flex;align-items:baseline;flex:none;gap:5px;white-space:nowrap;font-style:normal}
.wrm2-game-tooltip-popover .wrm2-game-skill-cost .cdr{flex:none}

@media (max-width: 380px) {
  .wrm2-game-icon:not(.wrm2-game-icon--compact):not(.wrm2-cb-skill):not(.wrm2-game-icon--rune) { --wrm2-game-size: 51px; margin: 10px; }
  .wrm2-game-join { width: 29px; height: 29px; flex-basis: 29px; margin: 21px -11px 0; }
}

/* Canonical SKILL PRIORITY frame: shared by community cards and Full Story abilities. */
.wrm2-cb-skill{--skill-color:var(--wrm2-yellow);position:relative;display:grid;place-items:center;width:100%;max-width:52px;aspect-ratio:1/1;height:auto;min-width:0;min-height:0;overflow:hidden;border:1px solid var(--skill-color);background:var(--wrm2-canvas);box-sizing:border-box;margin:0;cursor:help}
.wrm2-cb-skill[data-skill="W"]{--skill-color:var(--wrm2-mint)}
.wrm2-cb-skill[data-skill="E"]{--skill-color:var(--wrm2-cyan)}
.wrm2-cb-skill img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.wrm2-cb-skill>.wrm2-cb-skill-key{position:absolute;right:-1px;top:-1px;padding:2px 4px;background:#060d0c;border:1px solid var(--skill-color);color:var(--skill-color);font:900 11px/1 var(--wrm2-font)}

.wrm2-cb-skill[data-skill="P"]{--skill-color:var(--wrm2-purple)}
.wrm2-cb-skill[data-skill="R"]{--skill-color:var(--wrm2-red)}