/* Grand-Fantasia style windows (see Screenchots/Ui/*): lavender paper body, steel frame, white title, lilac item tiles, green stat values. */
@import url("win-fitting.css"); /* the fitting room (client/fitting/) */
.gfw { position: absolute; z-index: var(--z-window); color: var(--gf-ink); border: 0; border-radius: 7px; font-size: var(--fs-strong); text-shadow: none;
  background: repeating-linear-gradient(45deg, rgba(68, 64, 96, 0.05) 0 2px, transparent 2px 7px), var(--gf-paper);
  box-shadow: 0 0 0 2px #100f17, 0 0 0 4px var(--gf-frame), 0 0 0 5px #8f8ab1, 0 0 0 7px #100f17, inset 0 0 0 1px #eae9f0, inset 0 0 0 3px rgba(96, 90, 136, 0.45), 0 10px 28px rgba(0, 0, 0, 0.6); }
.gfw-head { display: flex; justify-content: space-between; align-items: center; padding: 4px 6px 4px 12px; cursor: move; border-radius: 6px 6px 0 0;
  background: linear-gradient(#76709f, #605a88 45%, #433e5e); box-shadow: inset 0 1px 0 rgba(201, 198, 217, 0.75), 0 2px 0 #211f2e; }
.gfw-title { color: var(--gf-title); font-weight: 800; font-size: var(--fs-lead); letter-spacing: 0.3px; text-shadow: -1px -1px 0 #1c1a28, 1px -1px 0 #1c1a28, -1px 1px 0 #1c1a28, 1px 1px 0 #1c1a28, 0 2px 2px rgba(0, 0, 0, 0.5); }
.gfw-tools { display: flex; gap: 4px; align-items: center; }
.gfw-btn { display: inline-flex; align-items: center; justify-content: center; width: 21px; height: 21px; border-radius: 5px; border: 2px solid #211f2e;
  background: linear-gradient(#dfdde9, #9691b6); color: #282638; font-weight: 800; font-size: var(--fs-body); padding: 0; cursor: pointer; box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0, 0, 0, 0.4); }
.gfw-help { background: linear-gradient(#e86a6a, #b02f2f); color: #fff; border-color: #5a1212; cursor: help; }
.gfw-close:hover { background: linear-gradient(#c5c2d7, #7c76a4); }
.gfw-body { padding: 8px; }
.gfw-tabs { display: flex; gap: 3px; margin-bottom: 6px; }
.gfw-tab { flex: 1; padding: 3px 6px; border: 1px solid #524d73; border-bottom: 0; border-radius: 8px 8px 0 0; background: #a19dbd; color: var(--gf-ink); font-weight: 700; font-size: var(--fs-body); }
.gfw-tab.on { background: var(--gf-paper); box-shadow: inset 0 3px 0 #908bb2; }
.gfw-tab:hover:not(.on) { background: #b4b0cb; }
.gfw-box { background: var(--gf-paper-dark); border: 1px solid #716c94; border-radius: 6px; padding: 6px; }
.gf-row { display: flex; align-items: stretch; gap: 4px; margin: 3px 0; }
.gf-plate { flex: 1; background: linear-gradient(#8883ac, #6a6492); color: #282638; font-weight: 700; border-radius: 4px 0 0 4px; padding: 2px 8px; border: 1px solid #4a4668; }
.gf-val { min-width: 62px; text-align: center; background: var(--gf-plate-dark); color: var(--gf-green); font-weight: 700; border-radius: 0 4px 4px 0; padding: 2px 8px; border: 1px solid #100f17; }
.gf-btn { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 2px rgba(0, 0, 0, 0.35); background: linear-gradient(#cecbdd, #8a85ad); border: 2px solid #464262; border-radius: 14px; padding: 3px 14px; font-weight: 700; color: #282638; cursor: pointer; }
.gf-btn:hover { background: linear-gradient(#d2d0df, #a09bbd); }
.gf-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.gf-tile { position: relative; width: 48px; height: 48px; border-radius: 5px; border: 2px solid #7a7790; background: repeating-linear-gradient(45deg, #bebbd2, #bebbd2 4px, #b2aec7 4px, #b2aec7 8px);
  display: flex; align-items: center; justify-content: center; cursor: pointer; }
.gf-tile.full { background: radial-gradient(circle at 50% 40%, #e3d8ff, var(--gf-tile)); border-color: var(--gf-tile-edge); }
.gf-tile.off { opacity: 0.55; cursor: not-allowed; }
.gf-tile.over { outline: 2px solid #9792b7; }
.gf-tile img { width: 42px; height: 42px; pointer-events: none; border-radius: 5px; }
.gf-tile .lbl { font-size: var(--fs-micro); text-align: center; line-height: 1.05; color: #423f5c; padding: 1px; }
.gf-tile .count { position: absolute; right: 2px; bottom: 0; font-size: var(--fs-small); font-weight: 700; color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000; }
.gf-tile .fort { position: absolute; left: 2px; top: 0; font-size: var(--fs-small); font-weight: 700; color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000; }
.gf-tile .gems { position: absolute; right: 2px; top: 1px; display: flex; gap: 1px; }
.gf-tile .gems i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid #333; background: #5ff2a0; }
.gf-tile .gems i.empty { background: #232131; }
.gf-footer { display: flex; justify-content: space-between; gap: 6px; margin-top: 8px; }
.gfw .mute { color: #55526d; }
.cw-doll .gf-tile .fort, .cwp .cw-doll .gf-tile .fort { left: 1px; top: -1px; font: 700 var(--fs-micro)/1.1 GfFont, Arial, sans-serif; color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 3px #000; }