/* ===================== overhaul: icons, town NPCs, inventory, archive, DATS lab, travel ===================== *//* DMW item icons (32px cells on the IconNN sheets), stat badges (Stat.png) and NPC-function badges (Talk_Icon.png) */

.iic:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: inline-block; flex: none; width: 32px; height: 32px; background-repeat: no-repeat; border-radius: 4px; vertical-align: middle; }
.iic.none:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(#34486c, #1d2a40); border: 1px solid var(--ui-line); color: var(--ui-gold); font-size: 17px; font-style: normal; }
.iic.empty:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { background: #0e141e; border: 1px dashed #34486c; }
.iic.big:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { transform: scale(1.5); margin: 8px 10px 8px 8px; }
.iic.tiny:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { transform: scale(.6); margin: -7px -6px; }
.sico:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: inline-block; width: 20px; height: 20px; background: url("../img/icons/Stat.png") no-repeat; background-size: 100px 80px; vertical-align: -5px; margin-right: 3px; flex: none; image-rendering: pixelated; }
.sico.none:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { background: #2c3e60; border-radius: 4px; font-size: 9px; font-style: normal; text-align: center; line-height: 20px; color: var(--ui-gold); width: auto; padding: 0 3px; }
.vico:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: inline-block; width: 24px; height: 24px; background: url("../img/icons/Talk_Icon.png") no-repeat; background-size: 192px 192px; vertical-align: middle; image-rendering: pixelated; flex: none; }
.good:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { color: var(--ui-good); } .bad:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { color: var(--ui-bad); }/* town NPCs on the field */


.npcs:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { position: absolute; left: 1.5%; top: 74px; z-index: 90; display: flex; flex-direction: column; gap: 6px; max-height: calc(100% - 250px); overflow-y: auto; padding-right: 4px; }
.npc:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; background: #0e141ee0; border: 2px solid var(--ui-gold-d); border-radius: 12px; cursor: pointer; text-align: left; min-width: 176px; color: var(--ui-text); }
.npc:hover:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { border-color: var(--ui-gold); transform: translateX(3px); }
.npc.off:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { opacity: .55; filter: grayscale(.7); }
.npc img:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { width: 44px; height: 44px; object-fit: contain; image-rendering: pixelated; }
.npch:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: radial-gradient(#3a5280, #1b2433); border-radius: 10px; }
.npch .vico:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { transform: scale(1.4); }
.npcl:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: flex; flex-direction: column; line-height: 1.15; }
.npcl .vico:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: none; }
.npcl b:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { font-weight: 400; color: var(--ui-gold); font-size: 14px; }
.npcl small:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { color: var(--ui-muted); font-size: 11px; }
.npchead:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: flex; gap: 10px; align-items: center; padding: 6px 8px; margin: -2px 0 8px; background: linear-gradient(90deg, #2c3e60, transparent); border-left: 3px solid var(--ui-gold); border-radius: 8px; }
.npcimg:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { width: 58px; height: 58px; object-fit: contain; image-rendering: pixelated; flex: none; }
.npcimg.human:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: inline-flex; align-items: center; justify-content: center; background: radial-gradient(#3a5280, #1b2433); border-radius: 12px; }
.npcimg.human .vico:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { transform: scale(1.6); }
.npchead .say:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { font-size: 13px; color: var(--ui-muted); font-style: italic; margin-top: 2px; }
.svcline:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.svcline span:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: inline-flex; align-items: center; gap: 3px; background: #0e141e; border-radius: 8px; padding: 1px 8px 1px 2px; }
.li.buy .price:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { color: var(--ui-gold); min-width: 64px; text-align: right; }
.li.buy .price:not(:where(#inst,#v2dock,#v2hud,#v2talk) *)::after { content: " B"; color: var(--ui-muted); font-size: 11px; }/* travel */


.walking:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { position: fixed; left: 50%; top: 56px; transform: translateX(-50%); z-index: 400; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; max-width: calc(100vw - 32px);
  background: #0e141ef0; border: 2px solid var(--ui-accent); border-radius: 12px; padding: 6px 12px; font-size: 14px; box-shadow: 0 6px 20px #000a; }
.walking span:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { color: var(--ui-muted); } .walking span.done:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { color: var(--ui-good); } .walking span.cur:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { color: var(--ui-gold); }
.walking i:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { color: var(--ui-line); font-style: normal; }
.walking button:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { background: #7a2232; border: 1px solid #ff8a9a; border-radius: 6px; padding: 2px 8px; cursor: pointer; }
.artmap .hex.fog polygon:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { fill: #05080ecc !important; stroke: #34486c !important; stroke-dasharray: 4 3; }
.artmap .hex.fog text:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { fill: #6a7a92 !important; }
.artmap .mark.town:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { fill: #f2c94c; font-size: 16px; }/* Gear window */


.gearwin:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: grid; grid-template-columns: 270px 1fr; gap: 12px; }
.gleft .tface:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { width: 52px; height: 56px; }/* DMW paper doll: 17 slots, 3 per row, icon over the slot name */

.doll:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin: 8px 0; }
.win .doll button.eslot:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { grid-template-columns: 1fr; justify-items: center; text-align: center; min-height: 56px; padding: 4px 2px; row-gap: 1px; position: relative; }
.doll .eslot .iic:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { grid-row: auto; }
.doll .eslot small:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { font-size: 10px; white-space: nowrap; }
.doll .eslot .gems:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { position: absolute; top: 2px; right: 3px; flex-direction: column; }
.dcol:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: flex; flex-direction: column; gap: 5px; }
.win button.eslot:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 6px; padding: 3px 5px; text-align: left;
  background: #0e141e; border: 1px dashed var(--ui-line); border-radius: 8px; min-height: 44px; }
.eslot .iic:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { grid-row: span 2; }
.eslot small:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { font-size: 11px; color: var(--ui-muted); }
.eslot .gems:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { margin: 0; }
.win button.eslot.full:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { border-style: solid; background: #161f30; cursor: pointer; }
.win button.eslot.sel:not(:where(#inst,#v2dock,#v2hud,#v2talk) *), .win button.itile.sel:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { outline: 2px solid #fff; outline-offset: 1px; }
.gb-Normal:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { border-color: #7d8aa0 !important; } .gb-Magic:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { border-color: #6fb8ff !important; } .gb-Rare:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { border-color: #f2c94c !important; }
.gb-Epic:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { border-color: #c890f8 !important; box-shadow: inset 0 0 10px #c890f855; } .gb-Unique:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { border-color: #ff8a5c !important; box-shadow: inset 0 0 12px #ff8a5c66; }
.ifilt:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { flex-wrap: wrap; gap: 6px; margin-bottom: 6px; } .ifilt select:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { font-size: 13px; padding: 2px 4px; }
.tabs:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { flex-wrap: wrap; } .tabs button small:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { opacity: .7; }
.igrid:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: grid; grid-template-columns: repeat(auto-fill, 46px); gap: 5px; max-height: 280px; overflow-y: auto; padding: 4px; background: #0e141e; border-radius: 8px; align-content: start; }
.igrid.small:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { max-height: 160px; grid-template-columns: repeat(auto-fill, 40px); }
.win button.itile:not(:where(#inst,#v2dock,#v2hud,#v2talk) *), .itile:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { position: relative; width: 46px; height: 46px; padding: 0 !important; display: flex; align-items: center; justify-content: center; background: #1b2433 !important; border: 2px solid #7d8aa0; border-radius: 8px !important; cursor: pointer; }
.igrid.small .itile:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { width: 40px; height: 40px; }
.itile.low:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { opacity: .55; }
.itile .tv:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { position: absolute; left: 0; right: 0; bottom: -1px; font-size: 10px; line-height: 12px; text-align: center; background: #000c; border-radius: 0 0 6px 6px; color: #fff; white-space: nowrap; overflow: hidden; }
.itile .tv .sico:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { transform: scale(.55); margin: -6px -6px -6px -7px; vertical-align: -6px; }
.itile .tn:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { position: absolute; right: 1px; top: 0; font-size: 10px; background: #000c; border-radius: 4px; padding: 0 2px; color: var(--ui-gold); }
.itile .tup:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { position: absolute; left: 1px; top: -2px; font-size: 13px; color: #5cf08c; text-shadow: 0 0 3px #000, 0 0 3px #000; }
.itile .tup.later:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { color: #888; }
.tlk:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { position: absolute; right: 0; bottom: 10px; font-size: 10px; }
.idet:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { margin-top: 8px; padding: 8px 10px; background: var(--ui-bg2); border-radius: 8px; min-height: 64px; }
.idet .lines:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { margin: 6px 0; font-size: 14px; }
.idet .acts:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: flex; flex-wrap: wrap; gap: 4px; }
.win button.ok:not(:where(#inst,#v2dock,#v2hud,#v2talk) *), .modal-box button.ok:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { background: #1f6a3c !important; border-color: #6fe39a !important; }
.icmp:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: grid; gap: 1px; margin: 4px 0 8px; padding: 4px 8px; background: #0e141e; border-radius: 6px; font-size: 13px; }
.icmp div:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: flex; gap: 8px; } .icmp div span:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { flex: 1; color: var(--ui-muted); } .icmp em:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { font-style: normal; min-width: 64px; text-align: right; }
.icmp em.good:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { color: #5cf08c; } .icmp em.bad:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { color: #ff7a8a; }
.modal-box .igrid:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { margin: 6px 0; }/* Party: skills + battle power */


.bp:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { float: right; font-size: 13px; color: #000; background: var(--ui-gold); border-radius: 8px; padding: 0 8px; }
.li.skill:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { padding: 3px 8px; } .li.skill.on:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { background: #263a5c; box-shadow: inset 3px 0 0 var(--ui-gold); }
.win button.eq:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { padding: 0 6px !important; font-size: 16px; background: transparent !important; border: none !important; }/* Archive */


.agrid:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 5px; max-height: 360px; overflow-y: auto; padding: 4px; background: #0e141e; border-radius: 8px; margin: 6px 0; }
.win button.acard:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { position: relative; display: flex; flex-direction: column; align-items: center; padding: 3px !important; background: #1b2433 !important; border: 2px solid #2a3a55 !important; border-radius: 8px !important; }
.win button.acard.sel:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { border-color: #fff !important; } .win button.acard.pick:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { border-color: var(--ui-bad) !important; background: #3a1b25 !important; }
.acard img:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { width: 48px; height: 48px; object-fit: contain; image-rendering: pixelated; }
.acard .an:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { font-size: 11px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acard small:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { font-size: 10px; color: var(--ui-muted); }
.acard .ck:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { position: absolute; left: 3px; top: 1px; font-size: 13px; }
.adet:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: flex; gap: 10px; align-items: center; padding: 6px 8px; background: var(--ui-bg2); border-radius: 8px; }
.adet > img:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { width: 64px; height: 64px; object-fit: contain; image-rendering: pixelated; }
.adet .acts:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.pstrip:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }/* DATS lab: Digiclone */


.clist:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: flex; flex-direction: column; gap: 5px; margin: 6px 0; }
.crow:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--ui-bg2); border-radius: 8px; }
.crow.locked:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { opacity: .6; }
.crow > .sico:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { transform: scale(1.4); margin: 0 8px 0 4px; }
.cbar:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: flex; gap: 2px; margin: 3px 0; }
.cbar i:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { flex: 1; height: 7px; max-width: 18px; background: #0e141e; border: 1px solid #34486c; border-radius: 2px; }
.cbar i.on:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { background: var(--ui-gold); } .cbar i.open:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { border-color: var(--ui-gold); }
.cbar i.on.t0:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { background: #8fd0ff; } .cbar i.on.t1:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { background: #58d080; } .cbar i.on.t2:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { background: #f2c94c; } .cbar i.on.t3:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { background: #ff8a5c; } .cbar i.on.t4:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { background: #e05cf0; }
.cbar.wide i:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { max-width: 12px; height: 9px; }
.clonefx:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; background: #0008; pointer-events: none; }
.cfx-box:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { text-align: center; }
.cfx-roll:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: flex; gap: 10px; justify-content: center; }
.cfx-roll i:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { width: 46px; height: 64px; border-radius: 8px; background: linear-gradient(#5cc8f8, #2c3e60); border: 2px solid #fff; animation: cflip .3s infinite alternate; }
.cfx-roll i:nth-child(2):not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { animation-delay: .1s; } .cfx-roll i:nth-child(3):not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { animation-delay: .2s; }
@keyframes cflip { to { transform: rotateY(80deg); filter: brightness(1.6); } }
.cfx-res:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { margin-top: 14px; font-size: 34px; text-shadow: 3px 3px 0 #000; min-height: 44px; }
.clonefx.win .cfx-roll i:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { animation: none; background: linear-gradient(#7af0a0, #1f6a3c); } .clonefx.win .cfx-res:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { color: #7af0a0; }
.clonefx.fail .cfx-roll i:not(:where(#inst,#v2dock,#v2hud,#v2talk) *), .clonefx.drop .cfx-roll i:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { animation: none; background: linear-gradient(#ff8a9a, #5a1a24); }
.clonefx.fail .cfx-res:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { color: #ff8a9a; } .clonefx.drop .cfx-res:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { color: #ff5a6a; }/* Item Make */


.li.recipe:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { align-items: flex-start; } .li.recipe .iic:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { margin-top: 3px; }
.need:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: inline-flex; align-items: center; font-size: 12px; padding: 0 6px; border-radius: 6px; margin: 2px 2px 0 0; background: #0e141e; }
.need.ok:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { color: #8fe8a8; } .need.no:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { color: #ff8a9a; }
.li.dim:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { opacity: .55; }/* Tamer hall / profile */


.tbtn:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { position: relative; } .tbtn.notown:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { filter: grayscale(1) brightness(.7); }
.tbtn .tb:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { font-size: 11px; color: var(--ui-gold); }
.tcur:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { position: absolute; right: 4px; top: 2px; color: var(--ui-gold); }
.tsyn:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { margin-top: 8px; padding: 6px 8px; background: #0e141e; border-radius: 8px; flex-wrap: wrap; }
.tsyn button small:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { font-size: 11px; opacity: .8; }
.plus:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { color: var(--ui-gold); font-weight: 400; }
.towned:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: flex; flex-wrap: wrap; gap: 4px; }
.tmini:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: flex; flex-direction: column; align-items: center; font-size: 10px; }
.tmini.notown:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { filter: grayscale(1); opacity: .5; } .tmini.cur:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { outline: 2px solid var(--ui-gold); border-radius: 6px; }
.tmini .tface.mini:not(:where(#inst,#v2dock,#v2hud,#v2talk) *), .li .tface.mini:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { width: 30px; height: 32px; }

@media (max-width: 760px) {
  .gearwin:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { grid-template-columns: 1fr; }
  .npc:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { min-width: 0; padding-right: 4px; } .npcl:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: none; }
  .npcs:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { top: 64px; }
}
.win[data-id="svc-tamer"] .tgrid:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; }
.win[data-id="svc-tamer"] .tbtn:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { padding: 2px; font-size: 11px; min-width: 0; overflow: hidden; }
.win[data-id="svc-tamer"] .tbtn .tface:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { width: 40px; height: 43px; }
.win[data-id="profile"] .tname:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { font-size: 14px !important; width: 60%; }/* Journey: chapters, NPC portraits */


.jface:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; flex: none; border-radius: 8px; background: #0e141e; }
.tface.jface:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { width: 40px; height: 43px; }
.jface.q:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: inline-flex; align-items: center; justify-content: center; }
.jtoast:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: flex; gap: 8px; align-items: flex-start; text-align: left; }
.jsay:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { font-size: 13px; color: #cfe0f8; font-style: italic; margin: 2px 0; }
.jchap:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { padding: 6px 8px; background: linear-gradient(90deg, #3a2e10, #1b2433); border: 1px solid var(--ui-gold-d); border-radius: 8px; margin-bottom: 6px; }
.jnpc:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: flex; gap: 10px; align-items: flex-start; }
.jnpc .jface:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { width: 56px; height: 56px; }
.jnpc h4:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { margin: 0 0 2px; }
.jtext:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { margin: 6px 0; padding: 6px 8px; background: #0e141e; border-radius: 6px; font-size: 14px; }
.jgoals:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: flex; flex-direction: column; gap: 2px; margin: 4px 0; }
.trg:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: flex; align-items: center; gap: 6px; }
.jpast:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { margin: 4px 0 6px; font-size: 13px; } .jpast summary:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { cursor: pointer; color: var(--ui-accent); }
.jpast .jstory:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { margin: 3px 0; }
.li.jnow:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { box-shadow: inset 3px 0 0 var(--ui-gold); background: #2e2610; }
.trnpc:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: flex; gap: 6px; align-items: flex-start; } .trnpc .jface:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { width: 32px; height: 32px; }
.chapterbox:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { width: min(440px, 100%); text-align: center; }
.chapterbox .chn:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { color: var(--ui-accent); letter-spacing: 1px; }
.chapterbox h3:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { font-size: 24px; }
.chapterbox .list:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { text-align: left; margin: 8px 0; }/* Gear dock icon: a DMW jacket */

#dock .ico-tamer:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { background: url("../img/icons/Icon01.png") -88px -22px / 352px auto no-repeat; border-radius: 4px; }/* Options: sound */


.vol:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: flex; align-items: center; gap: 8px; margin: 4px 0; } .vol input:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { flex: 1; }/* cloud save loader on the first screen */


.cloudload:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { position: fixed; right: 16px; bottom: 16px; z-index: 9999; color: #e8eefc; background: #121a28ee; border: 1px solid var(--ui-line, #34486c); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; max-width: 280px; }
.cloudload .row:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: flex; gap: 6px; } .cloudload input:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { flex: 1; min-width: 0; }
.cloudload button:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { background: #24406a; color: #fff; border: 1px solid #4f7ab8; border-radius: 6px; padding: 3px 12px; cursor: pointer; font: inherit; } .cloudload input:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { background: #0b111c; color: #e8eefc; border: 1px solid #34486c; border-radius: 6px; padding: 3px 6px; font: inherit; }/* DigiDex › Decks */


.decklist:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow: auto; }
.deck:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { background: #0e141e; border: 1px solid var(--ui-line, #34486c); border-radius: 8px; padding: 6px 8px; }
.deck.done:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { border-color: #4fbf7f; } .deck.on:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { border-color: #f2c94c; box-shadow: inset 0 0 12px #f2c94c44; }
.deck .row:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: flex; align-items: center; gap: 8px; }
.dmwtag:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { background: #7a2232; color: #ffd0d8; border-radius: 4px; padding: 0 4px; font-size: 10px; }
.dmem:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: flex; flex-wrap: wrap; gap: 4px; margin: 5px 0; }
.dm:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: flex; flex-direction: column; align-items: center; width: 58px; opacity: .45; filter: grayscale(1); }
.dm.got:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { opacity: 1; filter: none; }
.dm img:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { width: 44px; height: 44px; object-fit: contain; image-rendering: pixelated; }
.dm i:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { font-style: normal; font-size: 9px; text-align: center; line-height: 1.1; word-break: break-word; }
.deff:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: #9fd7ff; }/* DigiDex › Union */


.ugrades:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.ugrade:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { border: 1px solid #34486c; border-radius: 6px; padding: 1px 6px; font-size: 11px; opacity: .55; }
.ugrade.got:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { opacity: 1; border-color: #f2c94c; color: #f2c94c; }
.ugoals:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.ugoals .good:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { color: #7fe0a0; }/* ---------- v0.15 ---------- *//* buttons keep their label on one line; rows that hold several of them wrap instead of squeezing */



.win button.small:not(:where(#inst,#v2dock,#v2hud,#v2talk) *), .modal-box button:not(:where(#inst,#v2dock,#v2hud,#v2talk) *), .svcbody button:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { white-space: nowrap; }
.svcbody .row:not(:where(#inst,#v2dock,#v2hud,#v2talk) *), .modal-box .row:not(:where(#inst,#v2dock,#v2hud,#v2talk) *), .row.small:not(:where(#inst,#v2dock,#v2hud,#v2talk) *), .ifilt:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { flex-wrap: wrap; }
.modal-box .row button.big:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { width: auto; flex: 1 1 auto; }
.modal-box:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { max-height: calc(100vh - 32px); overflow: auto; }
.modal-box.chest .list:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { max-height: 50vh; overflow: auto; }
.li.loot:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { border-left: 3px solid #b878f8; } .li.loot b:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { color: var(--ui-gold); }/* partner HP/SP under its name on the field */

.partner .pbars:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: flex; flex-direction: column; gap: 2px; width: 110px; margin-top: 3px; }
.partner .pbars i:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: block; height: 5px; background: #0e141ecc; border: 1px solid #0008; border-radius: 3px; overflow: hidden; }
.partner .pbars b:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: block; height: 100%; transition: width .6s; }
.partner .pbars .hp b:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { background: linear-gradient(#7cf08a, #2fa84a); } .partner .pbars .hp.low b:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { background: linear-gradient(#ff9a7a, #d0402a); }
.partner .pbars .sp b:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { background: linear-gradient(#8fd0ff, #2f7fd0); }/* field boss tracker */

.bosshud:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { position: absolute; left: 50%; top: 122px; transform: translateX(-50%); z-index: 6; display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; pointer-events: none; }
.bosshud .bh:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: flex; align-items: center; gap: 6px; background: #0e141ee0; border: 2px solid #8a3a3a; border-radius: 10px; padding: 3px 9px 3px 4px; font-size: 12px; pointer-events: auto; }
.bosshud .bh img:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { width: 34px; height: 34px; object-fit: contain; image-rendering: pixelated; }
.bosshud .bh b:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { color: #ff9a8a; font-weight: 400; }
.bosshud .bh .bhb:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: block; height: 4px; width: 120px; background: #000a; border-radius: 2px; margin-top: 2px; overflow: hidden; }
.bosshud .bh .bhb i:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: block; height: 100%; background: #e05040; }
.bosshud .bh.ready:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { border-color: #ffd34a; animation: bhpulse 1.2s infinite; } .bosshud .bh.ready b:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { color: #ffd34a; }
@keyframes bhpulse { 50% { box-shadow: 0 0 14px #ffd34a; } }/* walking progress */

.walking .wbar:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { flex-basis: 100%; height: 4px; background: #0008; border-radius: 2px; overflow: hidden; }
.walking .wbar i:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: block; height: 100%; background: var(--ui-gold); transition: width .2s linear; }
.walking em:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { color: #ff8a7a; font-style: normal; }
.win button.big small:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: block; font-size: 12px; opacity: .8; }
.win button.big.warp:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { width: auto; flex: none; }/* quick slots */

.qslots:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: flex; gap: 8px; flex-wrap: wrap; }
.qslot:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: flex; align-items: center; gap: 6px; background: var(--ui-bg2); border-radius: 8px; padding: 4px 8px; flex: 1 1 200px; }
.qslot select:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { max-width: 150px; }/* DigiDex card */

.dexdet:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { background: var(--ui-bg2); border: 1px solid var(--ui-gold-d); border-radius: 10px; padding: 8px; margin-bottom: 8px; }
.dexdet img:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { width: 64px; height: 64px; object-fit: contain; image-rendering: pixelated; }
.dexdet a:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { color: #8fe0ff; cursor: pointer; text-decoration: underline; }
.dexcard:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { cursor: pointer; } .dexcard.sel:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { outline: 2px solid var(--ui-gold); }/* special drops */

.toast .tspecial.t1:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { text-shadow: 0 0 8px #6fe39a; } .toast .tspecial.t2:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { text-shadow: 0 0 10px #ffd34a; }
.toast:has(.tspecial):not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { border-color: #ffd34a; box-shadow: 0 0 22px #ffd34a88, 0 6px 18px #000a; }/* hatch stage */

.egglv:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { padding: 0 3px; border-radius: 3px; background: #444; color: #fff; } .egglv.e4:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { background: #a07a20; } .egglv.e5:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { background: #3a8ab0; }/* battle: Skip only when allowed */

.battle .speed .hidden:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: none; }/* top-bar logo -> updates */

#top .logo:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { cursor: pointer; } #top .logo small:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { font-size: 11px; color: var(--ui-muted); }/* updates */

.updbox:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { width: min(560px, 100%); }
.upd:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { margin: 6px 0; background: var(--ui-bg2); border-radius: 8px; padding: 6px 10px; }
.upd summary:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { cursor: pointer; } .upd ul:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { margin: 6px 0 4px; padding-left: 18px; font-size: 14px; } .upd ul.minor:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { font-size: 13px; color: var(--ui-muted); }
.updcard a:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { color: #8fe0ff; cursor: pointer; text-decoration: underline; font-size: 13px; }/* evolution scene */

.evofx:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { position: fixed; inset: 0; z-index: 2000; background: #000; opacity: 0; transition: opacity .45s; overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.evofx.in:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { opacity: 1; } .evofx.out:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { opacity: 0; }
.evo-rays:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { position: absolute; inset: -50%; background: repeating-conic-gradient(from 0deg, #1d3a7a 0 8deg, #0a1430 8deg 16deg); animation: evospin 9s linear infinite; opacity: .85; }
.evofx.full .evo-rays:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { background: repeating-conic-gradient(from 0deg, #f0a020 0 7deg, #6a1a08 7deg 14deg); }
.evo-ring:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { position: absolute; width: 60vmin; height: 60vmin; border-radius: 50%; background: radial-gradient(circle, #fff8 0, #ffd34a44 35%, transparent 70%); animation: evopulse 1.4s ease-in-out infinite; }
@keyframes evospin { to { transform: rotate(360deg); } }
@keyframes evopulse { 50% { transform: scale(1.15); opacity: .7; } }
.evo-mon:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { position: relative; width: 42vmin; height: 42vmin; }
.evo-mon img:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; transition: filter .3s, opacity .05s; }
.evo-mon img.b:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { opacity: 0; }
.evo-mon.glow img:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { filter: brightness(0) invert(1) drop-shadow(0 0 18px #fff) drop-shadow(0 0 40px #8fe0ff); }
.evo-mon.swap img.a:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { opacity: 0; } .evo-mon.swap img.b:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { opacity: 1; }
.evo-mon.new img.a:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { opacity: 0; } .evo-mon.new img.b:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { opacity: 1; filter: drop-shadow(0 0 22px #ffd34a); animation: evobounce .6s ease-out; }
@keyframes evobounce { 0% { transform: scale(.6); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.evo-text:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { position: absolute; bottom: 10vh; left: 0; right: 0; text-align: center; font-size: clamp(20px, 4vmin, 34px); color: #fff; text-shadow: 3px 3px 0 #000; }
.evo-text .evo-name:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: block; font-size: clamp(30px, 7vmin, 64px); color: var(--ui-gold); animation: evobounce .6s ease-out; }
.evo-text small:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { font-size: 16px; color: #cfe; }
.evo-flash:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.evofx.flash .evo-flash:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { animation: evoflash .9s ease-out; }
@keyframes evoflash { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
.evo-skip:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { position: absolute; bottom: 12px; right: 16px; font-size: 12px; color: #fff8; }
@media (max-width: 760px), (max-height: 500px) { .bosshud:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { top: 56px; left: 6px; transform: none; justify-content: flex-start; } .bosshud .bh .bhb:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { width: 80px; } }/* ---------- v0.16 ---------- *//* field sprites: a square box per Digimon; the sprite inside is sized by stage + visible body (G.spriteFit) */



.wander .wbox:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { position: relative; width: calc(124px * var(--sz, 1)); height: calc(124px * var(--sz, 1)); }
.wander .wbox:not(.fit) img:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { width: 100%; height: 100%; }
.wander.right img:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { transform: none; } .wander.right .wbox:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { transform: scaleX(-1); }
@media (max-width: 760px), (max-height: 500px) { .wander .wbox:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { width: calc(88px * var(--sz, 1)); height: calc(88px * var(--sz, 1)); } }
.asbox:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { width: min(520px, 100%); } .asrow:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: flex; align-items: center; gap: 8px; margin: 6px 0; } .asrow b:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { width: 96px; font-weight: 400; color: var(--ui-gold); } .asrow select:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { flex: 1; }
.asfam:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: flex; flex-wrap: wrap; gap: 2px 10px; max-height: 110px; overflow: auto; background: var(--ui-bg2); border-radius: 6px; padding: 4px 8px; }
#top .chip.idc b:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { color: #8fe0ff; }/* hatch scene */

.hatchfx .evo-rays:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { background: repeating-conic-gradient(from 0deg, #3a7a3a 0 8deg, #12301a 8deg 16deg); }
.hatch-egg:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { position: relative; width: 192px; height: 192px; display: flex; align-items: center; justify-content: center; }
.hatch-egg .hatchicon:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { transform: scale(6); image-rendering: pixelated; }
.hatch-egg.wobble:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { animation: eggwob .7s ease-in-out; }
@keyframes eggwob { 15% { transform: rotate(calc(-9deg * var(--w, 1))); } 40% { transform: rotate(calc(9deg * var(--w, 1))); } 65% { transform: rotate(calc(-6deg * var(--w, 1))); } 85% { transform: rotate(calc(3deg * var(--w, 1))); } }
.hatch-egg .crack:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { position: absolute; display: none; height: 4px; background: #fff; box-shadow: 0 0 10px #fff, 0 0 20px #ffd34a; border-radius: 2px; }
.hatch-egg .c1:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { width: 70px; left: 50px; top: 80px; transform: rotate(-25deg); } .hatch-egg .c2:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { width: 80px; left: 70px; top: 100px; transform: rotate(30deg); } .hatch-egg .c3:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { width: 90px; left: 40px; top: 118px; transform: rotate(-10deg); }
.hatch-egg.k1 .c1:not(:where(#inst,#v2dock,#v2hud,#v2talk) *), .hatch-egg.k2 .c2:not(:where(#inst,#v2dock,#v2hud,#v2talk) *), .hatch-egg.k3 .c3:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: block; }
.hatch-mon:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { position: absolute; } .hatch-mon img.b:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { opacity: 0; } .hatch-mon.new img.b:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { opacity: 1; filter: drop-shadow(0 0 22px #ffd34a); animation: evobounce .6s ease-out; }
.offbox:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { width: min(460px, 100%); } .offbox .list:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { max-height: 55vh; overflow: auto; }
.eqline:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { background: var(--ui-bg2); border-radius: 8px; padding: 6px 8px; margin: 6px 0; border-left: 3px solid #3a4a66; } .eqline.on:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { border-left-color: var(--ui-good); } .eqline.fin:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { opacity: .6; } .eqq:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { margin-top: 4px; padding-top: 4px; border-top: 1px dashed #34486c; }/* v0.47 skill cards (Party › Skills): closed = plain line + tags, open = full breakdown */


.li.skill.sk:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: block; padding: 4px 8px; }
.li.skill.sk .sk-row:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: flex; align-items: center; gap: 6px; }
.li.skill.sk .sk-head:not(:where(#inst,#v2dock,#v2hud,#v2talk) *), .li.skill.sk .sk-plain:not(:where(#inst,#v2dock,#v2hud,#v2talk) *), .li.skill.sk .sk-chev:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { cursor: pointer; }
.li.skill.sk .sk-head:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { line-height: 1.5; }
.sk-rate:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { min-width: 52px; text-align: right; white-space: nowrap; } .sk-rate small:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { opacity: .6; margin-left: 1px; }
.li.skill:not(.on) .sk-rate b:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { opacity: .55; }
.sk-chev:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { width: 14px; text-align: center; opacity: .7; }
.sk-plain:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { font-size: 12px; color: #c8d4e4; margin: 1px 0 0 28px; line-height: 1.35; }
.sk-detail:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { margin: 6px 0 2px 28px; padding: 6px 8px; background: #0e1828; border: 1px solid #2c3e5c; border-radius: 6px; font-size: 12px; }
.sk-detail .skdesc:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { font-style: italic; color: #9fb0c8; margin-bottom: 4px; }
.sk-detail .skd:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: grid; grid-template-columns: 70px 1fr; gap: 6px; padding: 2px 0; border-top: 1px solid #1c2a40; }
.sk-detail .skd > span:first-child:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { color: #8aa0bc; }
.sktag:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: inline-block; font-size: 10px; line-height: 14px; padding: 0 5px; border-radius: 7px; margin-right: 2px; background: #3a4a62; color: #e8eef8; vertical-align: 1px; }
.sktag.t-Multihit:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { background: #2f6db0; } .sktag.t-Pierce:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { background: #6a5acd; } .sktag.t-Charge:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { background: #c0502a; }
.sktag.t-CC:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { background: #b8902a; } .sktag.t-DoT:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { background: #8a3fa0; } .sktag.t-Debuff:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { background: #5a6070; }
.sktag.t-Buff:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { background: #2d8a5a; } .sktag.t-Heal:not(:where(#inst,#v2dock,#v2hud,#v2talk) *), .sktag.t-Drain:not(:where(#inst,#v2dock,#v2hud,#v2talk) *), .sktag.t-Cure:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { background: #2f9a72; }
.sktag.t-Recoil:not(:where(#inst,#v2dock,#v2hud,#v2talk) *), .sktag.t-SelfPanic:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { background: #a03a3a; } .sktag.t-Inst-akill:not(:where(#inst,#v2dock,#v2hud,#v2talk) *), .sktag.t-Instakill:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { background: #202028; border: 1px solid #c03030; }
.skhelp:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { margin-top: 8px; font-size: 12px; } .skhelp summary:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { cursor: pointer; color: var(--ui-gold, #e8c048); }
.skhelp p:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { margin: 6px 0; line-height: 1.45; }
.skstat:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px; }
.skstat .status:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { display: inline-block; min-width: 74px; font-size: 10px; color: #fff; padding: 0 4px; border-radius: 3px; text-align: center; }
@media (max-width: 600px) { .skstat:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { grid-template-columns: 1fr; } .sk-plain:not(:where(#inst,#v2dock,#v2hud,#v2talk) *), .sk-detail:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { margin-left: 0; } }
.status.StatReset:not(:where(#inst,#v2dock,#v2hud,#v2talk) *) { background: #505058; }
/* v0.77.1 owner-approved evolution tunnel covers every aspect ratio without rotated corners. */
.evofx:not(.hatchfx){background:#071329}
.evofx:not(.hatchfx) .evo-rays{display:none}
.evo-tunnel{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;pointer-events:none}