/* zag.css — zrkeel agent styles. Loaded after g.css from game_shell_nav; remove that link to revert everything here. */

/* ===== items popup ([data-Game_Items]): sizing + skin =====
   showPopup() pins height:400px / min-width:400px inline, which crushes the grid into 2 cramped columns;
   !important is the only way to override inline styles without touching javascript.js. */
[data-Game_Items]{
    width:min(640px,94vw)!important; min-width:0!important;
    height:auto!important; max-height:calc(100vh - 190px); /* clear the top resource bar and the bottom icon dock */
    padding:0 0 14px;
    background:linear-gradient(180deg,#0f1b33 0%,#0a1224 100%);
    border:1px solid #2f4570; border-radius:16px;
    box-shadow:0 0 0 1px rgba(96,205,255,.12) inset,0 24px 60px rgba(0,0,0,.7),0 0 0 100vmax rgba(0,0,0,.5); /* last one: dims the whole page behind */
    overflow-x:hidden;
}
[data-Game_Items] .gi-tabs{ /* full-bleed strip glued to the popup top; sticky so it stays while the list scrolls */
    display:grid; grid-template-columns:1fr 1fr; gap:0; margin:0; padding:0;
    position:sticky; top:0; z-index:10;
    background:#0a1224; border-bottom:1px solid #2f4570; border-radius:16px 16px 0 0;
}
[data-Game_Items]{ padding-top:0!important; }          /* g.css gives the box 10px padding; that strip let cards scroll past above the tabs */
[data-Game_Items] .gi-tabs::before{ /* solid plate above the strip: whatever gap the box leaves, nothing shows through */
    content:''; position:absolute; left:0; right:0; bottom:100%; height:24px; background:#0a1224;
}
[data-Game_Items] .gi-tab{
    padding:13px 0; border:0; border-radius:0; background:transparent; box-shadow:none;
    color:#8fa3c8; font-size:15px; font-weight:700;
    border-bottom:3px solid transparent; margin-bottom:-1px;
}
[data-Game_Items] .gi-tab:hover{ background:#0f1b33; color:#dbe6ff; }
[data-Game_Items] .gi-tab.active{ background:linear-gradient(180deg,#0f1b33,#16294a); color:#8fdcff; border-bottom-color:#60cdff; }
/* thin visible scrollbar (g.css hides it; a hidden bar on a long list gives no scroll cue) */
[data-Game_Items]{ scrollbar-width:thin; scrollbar-color:#2f4570 transparent; }
[data-Game_Items]::-webkit-scrollbar{ width:6px; }
[data-Game_Items]::-webkit-scrollbar-thumb{ background:#2f4570; border-radius:3px; }
[data-Game_Items] .gi-section-title{
    display:flex; align-items:center; gap:10px;
    margin:14px 14px 10px; padding:0; border:0;
    color:#ffd166; font-size:14px;
}
[data-Game_Items] .gi-section-title::after{ content:''; flex:1; height:1px; background:linear-gradient(to left,#2f4570,transparent); }
[data-Game_Items] .gi-grid{
    grid-template-columns:repeat(auto-fill,minmax(136px,1fr));
    gap:12px; padding:0 14px;
}
[data-Game_Items] .gi-face{ border-color:#2f4570; border-radius:14px; }
[data-Game_Items] .gi-front{ background-color:#132342; transition:border-color .2s,box-shadow .2s; }
[data-Game_Items] .gi-card:hover .gi-front{ border-color:#60cdff; box-shadow:0 8px 24px rgba(0,0,0,.45); }
[data-Game_Items] .gi-front-dsc{ font-size:13px; line-height:1.4; padding:8px 8px 6px; }
[data-Game_Items] .gi-front-action{ padding:0 10px 10px; }
[data-Game_Items] .gi-btn{ padding:9px 8px; font-size:13px; border-radius:9px; }
[data-Game_Items] .gi-btn-buy{ background:linear-gradient(180deg,#8fdcff,#5cc0f5); color:#062235; box-shadow:0 2px 0 #2e86b8; }
[data-Game_Items] .gi-btn-buy:active{ transform:translateY(1px); box-shadow:none; }
[data-Game_Items] .gi-price-badge,
[data-Game_Items] .gi-owned-badge{
    top:8px; left:8px; padding:3px 8px; font-size:12px; border-radius:20px;
    background:rgba(5,10,22,.85); backdrop-filter:blur(3px);
}

/* ===== buy feedback ===== */
.gi-card.zag-bought .gi-front{ animation:zagBuyRing .9s ease-out; }
@keyframes zagBuyRing{
    0%  { box-shadow:0 0 0 0 rgba(46,204,113,.9); border-color:#2ecc71; }
    100%{ box-shadow:0 0 0 16px rgba(46,204,113,0); border-color:#2ecc71; }
}
.gi-btn.zag-done{ background:linear-gradient(180deg,#5ee49a,#2ecc71)!important; color:#062215!important; box-shadow:0 2px 0 #1e8f4e!important; pointer-events:none; }
.zag-buy-float{
    position:absolute; left:50%; bottom:100%; transform:translateX(-50%);
    color:#ffd166; font-weight:800; font-size:15px; white-space:nowrap;
    text-shadow:0 1px 4px rgba(0,0,0,.9); pointer-events:none; z-index:5;
    animation:zagFloat 1.4s ease-out forwards;
}
@keyframes zagFloat{ 0%{opacity:0;transform:translate(-50%,6px)} 15%{opacity:1} 100%{opacity:0;transform:translate(-50%,-34px)} }

/* ===== .ic: emoji -> img/ic/<slot>.png (icons plan: .md/plans/icons.md, atlas in img/.new/icons) =====
   markup is <img class=ic src=img/ic/<slot>.png> (unquoted attrs: legal HTML5, safe inside any PHP/JS string).
   Sized by the surrounding font, so headers, buttons and empty states scale like the emoji did. */
img.ic{ display:inline-block; height:1.15em; width:auto; vertical-align:-.2em; }
/* ===== .dot-*: the 5 colour-dot emoji (status/tribe markers) as CSS, never raster ===== */
[class^="dot-"],[class*=" dot-"]{ display:inline-block; width:.7em; height:.7em; border-radius:50%; vertical-align:-.05em; }
.dot-r{ background:#d32f2f; }
.dot-y{ background:#ffd166; }
.dot-g{ background:#43a047; }
.dot-b{ background:#60cdff; }
.dot-k{ background:#555;    }