/* Gear traits: battle animations, the item sheet's trait card and "Know your gear", the rare-drop reveal, gear on figures. */
.gfx { position: absolute; pointer-events: none; z-index: 58; }
.gfx > svg { width: 100%; height: 100%; display: block; overflow: visible; }
.gfx-ring { border: 5px solid var(--c, #ffd23f); border-radius: 50%; box-shadow: 0 0 0 2.5px var(--ink), inset 0 0 0 2.5px var(--ink); }
.gfx-bubble { border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.85), color-mix(in srgb, var(--c, #9cc4ff) 45%, transparent) 55%, color-mix(in srgb, var(--c, #9cc4ff) 70%, transparent)); border: 3px solid var(--ink); }
.gfx-cord { border-radius: 50%; border: 5px dashed var(--c, #e63946); box-shadow: 0 0 14px 2px var(--c, #e63946); }
.gfx-clock { border-radius: 50%; border: 4px solid var(--ink); background: conic-gradient(var(--gold) 0 70%, #fff3b0 70% 100%); }
.gfx-beam { border-radius: 30px; background: linear-gradient(transparent, #fffbe0 20%, #fff 50%, #fffbe0 80%, transparent); height: 170px !important; margin-top: -120px !important; box-shadow: 0 0 22px 6px rgba(255, 243, 168, .85); transform-origin: 50% 100%; }
.gfx-beam.gold { background: linear-gradient(transparent, #ffe066 25%, #fff3b0 60%, transparent); }
.gfx-word { position: absolute; pointer-events: none; z-index: 63; font: 400 20px/1 var(--head); color: var(--gold); -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; white-space: nowrap; }
.gfx-badge { position: absolute; z-index: 64; pointer-events: none; display: flex; align-items: center; gap: 5px; padding: 3px 10px 3px 3px; background: #fff; border: 3px solid var(--ink); border-radius: 999px; box-shadow: 0 3px 0 var(--ink); font: 400 13px/1 var(--head); color: var(--ink); white-space: nowrap; }
.gfx-badge .gi { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--rare); border: 2.5px solid var(--ink); display: grid; place-items: center; overflow: hidden; }
.gfx-badge.legendary { background: #fff3c4; }
.gfx-badge.legendary .gi { background: var(--leg); }
.gfx-badge .gi svg { width: 20px; height: 20px; }

/* The item sheet */
.traitcard { position: relative; margin-top: 10px; padding: 12px 12px 12px 58px; border: 3px solid var(--ink); border-radius: 16px; background: linear-gradient(135deg, #e3eeff, #cfe0ff); box-shadow: 0 4px 0 var(--ink); overflow: hidden; }
.traitcard.legendary { background: linear-gradient(135deg, #fff3c4, #ffe08a); }
.traitcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.65) 50%, transparent 65%); transform: translateX(-100%); animation: traitshine 3.2s ease-in-out infinite; pointer-events: none; }
@keyframes traitshine { 0%, 55% { transform: translateX(-100%); } 85%, 100% { transform: translateX(100%); } }
.traitcard .tbadge { position: absolute; left: 10px; top: 12px; width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--ink); background: var(--rare); display: grid; place-items: center; box-shadow: 0 3px 0 var(--ink); }
.traitcard.legendary .tbadge { background: var(--leg); }
.traitcard .tbadge svg { width: 22px; height: 22px; }
.traitcard .tlabel { font: 900 10.5px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.traitcard .tname { font: 400 19px/1.1 var(--head); margin: 3px 0 4px; }
.traitcard .ttext { font-weight: 800; line-height: 1.4; }
.traitcard .tnext { margin-top: 7px; font: 800 12.5px/1.35 var(--body); color: #22577a; background: rgba(255,255,255,.65); border-radius: 10px; padding: 5px 8px; }
.traitcard.legendary .tnext { color: #8a5a00; }
.gearbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.gearbtns .btn { font-size: 15px; padding-left: 8px; padding-right: 8px; }
.gearbtns .btn small { display: block; font: 800 11px/1.1 var(--body); opacity: .85; margin-top: 2px; }
.versefull { margin-top: 12px; }
.versefull .vd { font: 800 13px/1.4 var(--body); color: var(--muted); margin-top: 6px; }

/* The rare-drop reveal on the results screen */
.gearreveal { position: relative; margin: 14px 0 4px; padding: 16px 14px 14px; border: 3px solid var(--ink); border-radius: 22px; background: radial-gradient(circle at 50% 28%, #fffbe0, #cfe0ff 70%); box-shadow: 0 6px 0 var(--ink); color: var(--ink); text-align: center; overflow: hidden; }
.gearreveal.legendary { background: radial-gradient(circle at 50% 28%, #fffbe0, #ffd166 75%); }
.gearreveal .grrays { position: absolute; left: 50%; top: 88px; width: 520px; height: 520px; margin: -260px 0 0 -260px; background: repeating-conic-gradient(rgba(255,255,255,.75) 0 10deg, transparent 10deg 24deg); border-radius: 50%; animation: grspin 14s linear infinite; pointer-events: none; }
@keyframes grspin { to { transform: rotate(360deg); } }
.gearreveal .grtag { position: relative; display: inline-block; font: 400 15px/1 var(--head); color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; letter-spacing: .04em; }
.gearreveal .gric { position: relative; width: 104px; height: 104px; margin: 8px auto 6px; border-radius: 26px; border: 4px solid var(--ink); background: var(--rare); display: grid; place-items: center; box-shadow: 0 5px 0 var(--ink), 0 0 0 6px rgba(255,255,255,.7), 0 0 30px 10px rgba(255,255,255,.8); }
.gearreveal.legendary .gric { background: var(--leg); }
.gearreveal .gric svg { width: 70px; height: 70px; }
.gearreveal .grname { position: relative; font: 400 26px/1.05 var(--head); }
.gearreveal .grtrait { position: relative; margin: 8px auto 0; max-width: 340px; font: 800 13.5px/1.4 var(--body); background: rgba(255,255,255,.8); border: 2.5px solid var(--ink); border-radius: 14px; padding: 7px 10px; }
.gearreveal .grtrait b { font: 400 15px/1.2 var(--head); display: block; }
.gearreveal .grverse { position: relative; margin: 9px auto 0; max-width: 360px; font: 600 15px/1.5 Georgia, "Iowan Old Style", serif; color: #2a2118; }
.gearreveal .grverse b { font: 800 12px/1 var(--body); color: var(--blue); }
.gearreveal .btn { position: relative; margin-top: 10px; }

/* Guided question (Scroll of Isaiah) */
.guided { display: flex; align-items: center; gap: 6px; justify-content: center; margin-top: 8px; font: 800 12.5px/1.2 var(--body); color: #22577a; }
.guided i { width: 22px; height: 22px; display: inline-grid; place-items: center; }
.guided i svg { width: 20px; height: 20px; }
.traitline { display: block; color: #b36b00; font-weight: 900; }
.itemrow .traitline { margin-top: 1px; }
.small .traitline { display: inline; }
.gearbtns .btn { flex-direction: column; gap: 2px; line-height: 1.05; min-height: 58px; }
.gearbtns .btn svg { display: inline-block; vertical-align: -3px; margin-right: 2px; }

/* ---------------------------------------------------------------- the Bag as one inventory
   One slot per thing you own, five across, sorted by how much you reach for it. Nothing you don't
   own is drawn at all (the old grid always showed all four keepsakes, at ×0). Tapping a slot opens
   the same sheet the rows used to: the verse, what it does, and Equip / Merge / Improve. */
.invgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.invcell { position: relative; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: #fff; border: 2.5px solid var(--ink); border-radius: 12px; box-shadow: 0 3px 0 var(--ink); padding: 3px; cursor: pointer; color: var(--ink); overflow: hidden; }
.invcell:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.invcell .ic { width: 62%; height: 62%; display: grid; place-items: center; }
.invcell .ic svg { width: 100%; height: 100%; }
.invcell .cname { font: 900 7.5px/1.1 var(--body); text-align: center; width: 100%; max-height: 17px; overflow: hidden; color: var(--muted); }
/* the count sits in the corner like a stack size */
.invcell .cct { position: absolute; right: 3px; bottom: 13px; font: 400 13px/1 var(--head); color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke; }
.invcell .cplus { position: absolute; left: 3px; top: 2px; font: 400 11px/1 var(--head); color: var(--gold); -webkit-text-stroke: 3px var(--ink); paint-order: stroke; }
.invcell .cworn { position: absolute; right: 2px; top: 2px; width: 13px; height: 13px; background: var(--green2); border: 1.5px solid var(--ink); border-radius: 50%; display: grid; place-items: center; }
.invcell .cworn svg { width: 9px; height: 9px; }
.invcell .cworn svg path, .invcell .cworn svg polyline { stroke: #fff; }
.invcell .cmerge { position: absolute; left: 2px; bottom: 15px; min-width: 14px; height: 14px; padding: 0 2px; background: var(--blue); color: #fff; border: 1.5px solid var(--ink); border-radius: 7px; font: 400 9px/13px var(--head); text-align: center; }
/* rarity reads at a glance, the way the old pills did */
.invcell.heroic { background: #eaf1ff; border-color: #2d5186; }
.invcell.legendary { background: #fff3c4; border-color: #b36b00; box-shadow: 0 3px 0 var(--ink), inset 0 0 0 2px var(--gold); }
@media (max-width: 340px) { .invgrid { grid-template-columns: repeat(4, 1fr); } }