/* ==========================================================================
   QOURATH — "Old Bronze" window frame + tabbed character window.
   Loaded last. Replaces the bright silver filigree with a running meander
   (Greek key) band in tarnished bronze, set with lattice-green gem bosses at
   the corners. border-image-repeat:round tiles the key along every edge, so
   the frame reads as one continuous carved band at any window size.
   ========================================================================== */
:root{
  --frame-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23e6c98a'/%3E%3Cstop offset='.4' stop-color='%239c7a3c'/%3E%3Cstop offset='.7' stop-color='%235e4522'/%3E%3Cstop offset='1' stop-color='%23c09a55'/%3E%3C/linearGradient%3E%3ClinearGradient id='d' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2315100a'/%3E%3Cstop offset='1' stop-color='%23080604'/%3E%3C/linearGradient%3E%3Cg id='k' fill='none' stroke='url(%23b)' stroke-width='1.3' stroke-linecap='square'%3E%3Cpath d='M32 8.5H64M32 21.5H64'/%3E%3Cpath d='M33.5 21.5V11H45.5V19H37.5V14.5H42'/%3E%3Cpath d='M49.5 21.5V11H61.5V19H53.5V14.5H58'/%3E%3C/g%3E%3Cg id='c'%3E%3Cpath d='M29 8.5H32M29 21.5H32M8.5 29V32M21.5 29V32' stroke='url(%23b)' stroke-width='1.3' fill='none'/%3E%3Crect x='3.5' y='3.5' width='25' height='25' fill='%230c0906' stroke='url(%23b)' stroke-width='1.3'/%3E%3Crect x='6.5' y='6.5' width='19' height='19' fill='none' stroke='%233b2b16' stroke-width='1'/%3E%3Cpath d='M16 7.5L24.5 16L16 24.5L7.5 16Z' fill='%2317110a' stroke='url(%23b)' stroke-width='1.2'/%3E%3Cpath d='M16 11.5L20.5 16L16 20.5L11.5 16Z' fill='%231f6b62' stroke='%230a2a26' stroke-width='.6'/%3E%3Cpath d='M16 12.6L18.2 14.8L16 15.4Z' fill='%239fe8dc' opacity='.8'/%3E%3Ccircle cx='7' cy='7' r='1' fill='%23c09a55'/%3E%3Ccircle cx='25' cy='7' r='1' fill='%23c09a55'/%3E%3Ccircle cx='7' cy='25' r='1' fill='%23c09a55'/%3E%3Ccircle cx='25' cy='25' r='1' fill='%23c09a55'/%3E%3C/g%3E%3C/defs%3E%3Cpath d='M2 2H94V94H2ZM32 32V64H64V32Z' fill='url(%23d)' fill-rule='evenodd'/%3E%3Crect x='1.5' y='1.5' width='93' height='93' fill='none' stroke='%23050403' stroke-width='2'/%3E%3Crect x='3.5' y='3.5' width='89' height='89' fill='none' stroke='%236e5429' stroke-width='1'/%3E%3Crect x='24.5' y='24.5' width='47' height='47' fill='none' stroke='url(%23b)' stroke-width='1'/%3E%3Crect x='26' y='26' width='44' height='44' fill='none' stroke='%23050403' stroke-width='1.5' opacity='.8'/%3E%3Cuse href='%23k'/%3E%3Cuse href='%23k' transform='rotate(90 48 48)'/%3E%3Cuse href='%23k' transform='rotate(180 48 48)'/%3E%3Cuse href='%23k' transform='rotate(270 48 48)'/%3E%3Cuse href='%23c'/%3E%3Cuse href='%23c' transform='rotate(90 48 48)'/%3E%3Cuse href='%23c' transform='rotate(180 48 48)'/%3E%3Cuse href='%23c' transform='rotate(270 48 48)'/%3E%3C/svg%3E");
  --bronze:#b8914c; --bronze-hi:#e6c98a; --bronze-lo:#5e4522; --bronze-deep:#2a1f12;
}
.panel,#helpCard,#dlg,#runSum,.frameS{
  border-style:solid;border-width:24px;
  border-image-source:var(--frame-img);
  border-image-slice:32;border-image-width:24px;border-image-outset:0;border-image-repeat:round;
}
#tooltip{border-style:solid;border-width:12px;border-image-source:var(--frame-img);
  border-image-slice:32;border-image-width:16px;border-image-repeat:round}
.panel{box-shadow:0 30px 80px rgba(0,0,0,.85), inset 0 0 0 1px rgba(184,145,76,.12), inset 0 0 90px rgba(0,0,0,.6)}

/* Titles and section rules pick up the bronze instead of cold silver */
.panel h2,#helpCard h2{
  background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#ecd9a8;
  text-shadow:0 1px 0 #000,0 0 14px rgba(230,201,138,.18);filter:none}
.secHdr{color:var(--bronze-hi);letter-spacing:.3em;font-size:10.5px;margin:12px 0 8px}
.secHdr::before{background:linear-gradient(90deg,transparent,var(--bronze-lo) 35%,var(--bronze))}
.secHdr::after{background:linear-gradient(90deg,var(--bronze),var(--bronze-lo) 65%,transparent)}
.panel::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--bronze),var(--bronze-lo))}
.panel{scrollbar-color:var(--bronze-lo) transparent}

/* Skill window: the header rule and detail column divider in bronze */
.skModern .skHead{border-bottom:1px solid rgba(184,145,76,.22);
  background:linear-gradient(90deg,color-mix(in srgb,var(--cc) 12%,transparent),transparent 55%),
             repeating-linear-gradient(90deg,rgba(184,145,76,.035) 0 2px,transparent 2px 9px)}
.skModern .skDet{border-left:1px solid rgba(184,145,76,.18)}
.skModern .skPts{border-color:rgba(184,145,76,.3)}
.skClose{color:var(--bronze)}
.skClose:hover{color:var(--bronze-hi);border-color:rgba(184,145,76,.4)}

/* ------------------------------------------------ tabbed character window */
#invPanel.ivModern{left:50%;right:auto;transform:translateX(-50%);width:min(1120px,96vw);
  top:4vh;bottom:auto;height:min(640px,calc(100vh - 4vh - 118px));padding:0 !important;overflow:hidden}
.ivHead{position:relative;height:52px;display:flex;align-items:flex-end;gap:14px;padding:0 14px 0 18px;
  border-bottom:1px solid rgba(184,145,76,.3);
  background:linear-gradient(180deg,rgba(184,145,76,.07),transparent),
             repeating-linear-gradient(90deg,rgba(184,145,76,.03) 0 2px,transparent 2px 9px)}
.ivTabs{display:flex;gap:4px;flex:1;align-self:flex-end}
.ivTab{all:unset;position:relative;cursor:pointer;padding:11px 22px 10px;margin-bottom:-1px;
  font-family:var(--display);font-size:12px;letter-spacing:.3em;color:#8d7a58;
  border:1px solid transparent;border-bottom:none;
  clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 100%,0 100%);transition:color .15s,background .15s}
.ivTab:hover{color:var(--bronze-hi);background:rgba(184,145,76,.06)}
.ivTab.on{color:#fff1cf;border-color:rgba(184,145,76,.55);
  background:linear-gradient(180deg,rgba(184,145,76,.22),rgba(15,12,8,.95) 70%);
  text-shadow:0 0 12px rgba(230,201,138,.45)}
.ivTab.on::after{content:'';position:absolute;left:14px;right:14px;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--cc,#5ad8c6),transparent);box-shadow:0 0 8px var(--cc,#5ad8c6)}
.ivDot{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:8px;padding:0 4px;box-sizing:border-box;
  font-style:normal;font-size:10px;letter-spacing:0;font-weight:bold;color:#05070a;background:var(--cc,#5ad8c6);
  border-radius:9px;box-shadow:0 0 10px var(--cc,#5ad8c6);vertical-align:1px;animation:plusPulse 1.4s ease-in-out infinite}
.ivGold{align-self:center;font-size:13px;color:#c9a227;letter-spacing:.08em}
.ivGold b{color:#f0d79a;font-weight:normal}
#ivClose{align-self:center}

.ivBody{position:absolute;top:53px;left:0;right:0;bottom:0;display:grid;grid-template-columns:340px minmax(0,1fr)}
.ivBody.ivT-stash,.ivBody.ivT-vendor{grid-template-columns:minmax(0,1fr)}
.ivDollCol{padding:16px 14px 16px 18px;border-right:1px solid rgba(184,145,76,.16);
  background:radial-gradient(70% 55% at 50% 45%,color-mix(in srgb,var(--cc,#5ad8c6) 8%,transparent),transparent 72%);
  display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.ivDollCol #doll{margin:0;padding:10px 8px;box-shadow:inset 0 0 0 1px rgba(184,145,76,.18), inset 0 0 40px #000}
.ivDollCol #dollStage{min-height:0}
.ivMain{padding:16px 22px 16px;overflow:auto;min-height:0}
.ivMain #statBox{margin-top:0 !important;padding-top:0 !important}
.ivMain .atGrid{gap:10px}
.ivMain .atCard{padding:12px}
.ivMain .atGroups{gap:18px;margin-top:16px}
.ivBag{display:grid;grid-template-columns:auto minmax(200px,1fr);gap:22px;align-items:start}
.ivTwo{display:flex;gap:28px;justify-content:center;align-items:flex-start}
.ivGridCol{display:flex;flex-direction:column}
.ivGridCol .secHdr{margin-top:0}
.ivTools{display:flex;gap:6px;justify-content:flex-end;margin:-2px 0 8px}
.ivGridCol #dropZone{margin-top:10px}
.ivSide .secHdr:first-child{margin-top:0}
.ivSide #charmBag{flex-wrap:wrap}
.ivNote{color:#6f6656;font-size:11px;line-height:1.45}
.ivHelp{margin-top:18px;padding-top:10px;border-top:1px solid rgba(184,145,76,.12)}
.ivVend{width:min(420px,100%)}
.ivStock{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:12px}
#invPanel.ivModern #invGrid,#invPanel.ivModern #stashGrid{margin:0}
@media (max-height:720px){ .ivMain .atCard{padding:8px} .ivMain .atGroups{margin-top:10px} }
.ivSide .cslot{background:rgba(90,216,198,.06)}