/* Grand-Fantasia style windows (see Screenchots/Ui/*): parchment body, brown frame, yellow title, lavender item tiles, green stat values. */
:root {
  --gf-frame: #8a5a28; --gf-frame-hi: #b27a3f; --gf-paper: #eadfc4; --gf-paper-dark: #d3c19b; --gf-ink: #4a2f14;
  --gf-plate: #b88c58; --gf-plate-dark: #3a2a18; --gf-green: #46e04a; --gf-title: #ffe44d; --gf-tile: #cdbcf2; --gf-tile-edge: #8a6fc0;
}
.gfw { position: absolute; z-index: 40; color: var(--gf-ink); border: 0; border-radius: 7px; font-size: 13px; text-shadow: none;
  background: repeating-linear-gradient(45deg, rgba(120, 90, 40, 0.05) 0 2px, transparent 2px 7px), var(--gf-paper);
  box-shadow: 0 0 0 2px #1e1008, 0 0 0 4px var(--gf-frame), 0 0 0 5px #f1c04a, 0 0 0 7px #1e1008, inset 0 0 0 1px #fff7da, inset 0 0 0 3px rgba(168, 116, 58, 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(#c58d4a, #a8743a 45%, #7a4c22); box-shadow: inset 0 1px 0 rgba(255, 233, 160, 0.75), 0 2px 0 #3b2412; }
.gfw-title { color: var(--gf-title); font-weight: 800; font-size: 14px; letter-spacing: 0.3px; text-shadow: -1px -1px 0 #3a2208, 1px -1px 0 #3a2208, -1px 1px 0 #3a2208, 1px 1px 0 #3a2208, 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 #3b2412;
  background: linear-gradient(#f6ead0, #cdb27a); color: #4a2f14; font-weight: 800; font-size: 12px; 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(#ffb59a, #e0603a); }
.gfw-body { padding: 8px; }
.gfw-tabs { display: flex; gap: 3px; margin-bottom: 6px; }
.gfw-tab { flex: 1; padding: 3px 6px; border: 1px solid #8a6636; border-bottom: 0; border-radius: 8px 8px 0 0; background: #cdb98d; color: var(--gf-ink); font-weight: 700; font-size: 12px; }
.gfw-tab.on { background: var(--gf-paper); box-shadow: inset 0 3px 0 #f1b84c; }
.gfw-tab:hover:not(.on) { background: #dccb9f; }
.gfw-box { background: var(--gf-paper-dark); border: 1px solid #a88a58; border-radius: 6px; padding: 6px; }
.gf-row { display: flex; align-items: stretch; gap: 4px; margin: 3px 0; }
.gf-plate { flex: 1; background: linear-gradient(#c79d68, #a97e4d); color: #4a2f14; font-weight: 700; border-radius: 4px 0 0 4px; padding: 2px 8px; border: 1px solid #7e5a30; }
.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 #1c130a; }
.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(#f0e1b8, #c3a96f); border: 2px solid #7a5a2a; border-radius: 14px; padding: 3px 14px; font-weight: 700; color: #4a2f14; cursor: pointer; }
.gf-btn:hover { background: linear-gradient(#f4e4bb, #d6bd82); }
.gf-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.gf-tile { position: relative; width: 48px; height: 48px; border-radius: 5px; border: 2px solid #9c8b6a; background: repeating-linear-gradient(45deg, #ddd0b0, #ddd0b0 4px, #d3c5a2 4px, #d3c5a2 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 #f6c453; }
.gf-tile img { width: 42px; height: 42px; pointer-events: none; border-radius: 5px; }
.gf-tile .lbl { font-size: 9px; text-align: center; line-height: 1.05; color: #6a5230; padding: 1px; }
.gf-tile .count { position: absolute; right: 2px; bottom: 0; font-size: 11px; 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: 11px; font-weight: 700; color: #ffcf40; 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: #3a2a18; }
.gf-footer { display: flex; justify-content: space-between; gap: 6px; margin-top: 8px; }
.gfw .mute { color: #7a6544; }