/* Super ZZZ — สไตล์หน้าเว็บ (frontend) */
.szzz-placeholder{
	border:1px dashed #c9c9c9;border-radius:8px;padding:16px;margin:12px 0;
	color:#666;background:#fafafa;font-size:14px;text-align:center
}

/* ===== หน้ารวมไดรฟ์ดิสก์ ===== */
.szzz-disc-wrap{margin:16px 0}
.szzz-disc-search{width:100%;max-width:420px;padding:10px 14px;border:1.5px solid #d4d7dd;border-radius:10px;font-size:15px;box-sizing:border-box}
.szzz-disc-search:focus{outline:none;border-color:#5b4bde}
.szzz-disc-count{color:#888;font-size:13px;margin:6px 2px 12px}
.szzz-disc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.szzz-disc{border:1px solid #e3e6ea;border-radius:14px;padding:14px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.szzz-disc-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.szzz-disc-img{width:56px;height:56px;object-fit:contain;background:#f4f5f7;border-radius:10px;flex:none}
.szzz-disc-name{margin:0;font-size:16px;font-weight:800;line-height:1.25}
.szzz-disc-eff{font-size:13.5px;line-height:1.55;margin:6px 0;color:#333}
.szzz-disc-eff .szzz-pc{display:inline-block;min-width:44px;font-weight:700;color:#5b4bde;background:#eef0fb;border-radius:6px;padding:1px 8px;margin-right:6px;font-size:12px}
.szzz-disc.szzz-hide{display:none}
.szzz-disc-empty{color:#888;padding:20px;text-align:center}
@media(prefers-color-scheme:dark){
	.szzz-disc{background:#171b21;border-color:#252b33}
	.szzz-disc-name,.szzz-disc-eff{color:#e7eaee}
	.szzz-disc-img{background:#20262e}
	.szzz-disc-search{background:#171b21;color:#e7eaee;border-color:#252b33}
	.szzz-disc-eff .szzz-pc{background:#241f4d;color:#b3a9ff}
}

/* ===== หน้ารวมตัวละคร/บอส/บังบู ===== */
.szzz-ent-wrap{margin:16px 0}
.szzz-ent-search{width:100%;max-width:420px;padding:10px 14px;border:1.5px solid #d4d7dd;border-radius:10px;font-size:15px;box-sizing:border-box}
.szzz-ent-search:focus{outline:none;border-color:#5b4bde}
.szzz-ent-count{color:#888;font-size:13px;margin:6px 2px 10px}
.szzz-ent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
/* Agent มีรายการมาก จึงใช้ 4 การ์ดต่อแถวเพื่อลดขนาดรูปและความยาวของหน้า */
.szzz-ent-wrap-zzz_agent .szzz-ent-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
/* หน้ารวมข้อมูลเกมหมวดอื่นใช้ 3 การ์ดต่อแถวบน desktop */
.szzz-ent-wrap-zzz_engine .szzz-ent-grid,
.szzz-ent-wrap-zzz_bangboo .szzz-ent-grid,
.szzz-ent-wrap-zzz_boss .szzz-ent-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
/* การ์ดหน้ารวม = ลิงก์คลิกทั้งใบ ไปหน้าเดี่ยว */
a.szzz-ent{display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid #e3e6ea;border-radius:14px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.05);text-decoration:none;color:inherit;transition:box-shadow .15s,transform .15s,border-color .15s}
a.szzz-ent:hover{box-shadow:0 4px 14px rgba(0,0,0,.10);transform:translateY(-2px);border-color:#5b4bde}
.szzz-ent.szzz-hide{display:none}
.szzz-ent-media{position:relative;aspect-ratio:1/1;background:#f4f5f7;overflow:hidden}
/* inset ทำให้ขนาดรูปอิงกรอบ media โดยตรง: object-fit จึงไม่ล้นออกมาถูกตัด */
.szzz-ent-img{position:absolute;inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);object-fit:contain;display:block}
.szzz-ent-img-placeholder{position:absolute;inset:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#202633,#151a22);color:#aeb5c1;font-size:12px;font-weight:700;text-align:center;letter-spacing:.02em}
.szzz-ent-ttl{min-width:0;padding:12px 14px 14px}
.szzz-ent-name{margin:0 0 6px;font-size:17px;font-weight:800;line-height:1.25}
.szzz-ent-tags{display:flex;flex-wrap:wrap;gap:5px}
/* Agent: ไฟล์ต้นทางเป็นภาพเต็มตัวที่จุดศีรษะไม่เท่ากัน จึงไม่ crop อัตโนมัติ */
.szzz-ent-zzz_agent .szzz-ent-media{aspect-ratio:4/3}
.szzz-ent-zzz_agent .szzz-ent-img{object-fit:contain;object-position:center}
/* เฉพาะ Agent ที่แอดมินตั้งจุดโฟกัส: เปลี่ยนเป็น crop ครึ่งตัวโดยไม่กระทบตัวอื่น */
.szzz-ent-zzz_agent .szzz-ent-img.szzz-agent-cropped{object-fit:cover;object-position:var(--szzz-focus-x,50%) var(--szzz-focus-y,50%);transform:scale(var(--szzz-zoom,1));transform-origin:var(--szzz-focus-x,50%) var(--szzz-focus-y,50%)}
/* Bangboo/W-Engine ใช้ไอคอน 1:1: เว้นขอบให้รูปเล็กไม่ถูกขยายจนแตก */
.szzz-ent-zzz_bangboo .szzz-ent-img,.szzz-ent-zzz_engine .szzz-ent-img{inset:20px;width:calc(100% - 40px);height:calc(100% - 40px)}
.szzz-ent-zzz_bangboo .szzz-ent-img-placeholder,.szzz-ent-zzz_engine .szzz-ent-img-placeholder{inset:20px}
/* Boss มีภาพต้นทางหลากหลาย: ใช้กรอบกว้างคงที่ และ crop เฉพาะในกรอบนี้ */
.szzz-ent-zzz_boss .szzz-ent-media{aspect-ratio:16/9}
.szzz-ent-zzz_boss .szzz-ent-img{inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.szzz-ent-zzz_boss .szzz-ent-img-placeholder{inset:0}
.szzz-tag{font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:20px;background:#eef0f4;color:#444;line-height:1.7}
.szzz-tag.el{background:#e7f0ff;color:#1d5fd6}
.szzz-tag.sp{background:#eafaf0;color:#1f8a4c}
.szzz-tag.rk{background:#fff4e0;color:#b7791f}
.szzz-tag.rk.szzz-tag-rk-rank-s{background:#fff0bf;color:#8a5a00;border:1px solid #d8aa38}
.szzz-tag.rk.szzz-tag-rk-rank-a{background:#f1e6ff;color:#6c36a3;border:1px solid #b989ea}
.szzz-tag.wk{background:#ffe9ec;color:#c0334a}
.szzz-ent-body{border-top:1px solid #eef0f2;padding-top:8px}
.szzz-fld{margin:7px 0}
.szzz-fld-l{font-size:11.5px;font-weight:700;color:#8a8f98;text-transform:uppercase;letter-spacing:.02em;margin-bottom:1px}
.szzz-fld-v{font-size:14px;line-height:1.55;color:#2a2f36}
.szzz-empty{color:#c0334a;font-style:normal;font-size:12.5px}
/* ชิปแหล่งที่มาภาษา (เฉพาะแอดมิน) */
.szzz-src{display:inline-block;font-size:10px;font-weight:800;padding:1px 6px;border-radius:5px;vertical-align:middle;letter-spacing:.02em;text-transform:uppercase}
.szzz-src-keep{background:#e6e8ff;color:#4b40c9}
.szzz-src-game{background:#e2f6e8;color:#1f8a4c}
.szzz-src-glossary{background:#e0f4f6;color:#1f7f8a}
.szzz-src-wiki{background:#e7f0ff;color:#1d5fd6}
.szzz-src-manual{background:#eef0f4;color:#555}
.szzz-src-ai{background:#f3e8ff;color:#8a3fce}
.szzz-src-mt{background:#fff0da;color:#b7791f}
.szzz-src-en_ok{background:#eceff2;color:#6b7280}
.szzz-src-none{background:#ffe0e4;color:#c0334a}
.szzz-legend{font-size:12px;color:#666;background:#fafbfc;border:1px solid #eceff2;border-radius:8px;padding:8px 10px;margin:0 0 12px;line-height:2}
.szzz-legend .szzz-src{margin:0 2px 0 6px}

/* ===== Agent Data Atlas — หน้ารวมเดียว เลื่อนดูรายการทั้งหมดได้ ===== */
.szzz-ent-wrap-zzz_agent{width:100%;max-width:1240px;margin:16px auto;padding:24px;border-radius:18px;background:radial-gradient(circle at 50% 0,#242036 0,#11151c 46%,#090b0f 100%);color:#f5f6fa;box-sizing:border-box}
.szzz-agent-toolbar{display:block}
.szzz-ent-wrap-zzz_agent .szzz-ent-search{display:block;width:100%;max-width:520px;margin:0 0 12px;box-sizing:border-box;background:#171b23;color:#f5f6fa;border-color:#3b414d}
.szzz-ent-wrap-zzz_agent .szzz-ent-search:focus{border-color:#bc72e9;box-shadow:0 0 0 3px rgba(188,114,233,.16)}
.szzz-agent-filter-reset,.szzz-agent-filter-options button{font:inherit;cursor:pointer}
.szzz-agent-filter-panel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:14px;border:1px solid #363d48;border-radius:12px;background:rgba(21,25,32,.96);box-sizing:border-box}
.szzz-agent-filter-group{min-width:0}
.szzz-agent-filter-group strong{display:block;margin-bottom:7px;font-size:12px;color:#d9dce4}
.szzz-agent-filter-options{display:flex;gap:6px;flex-wrap:wrap}
.szzz-agent-filter-options button,.szzz-agent-filter-reset{border:1px solid #414855;border-radius:7px;background:#20252e;color:#dce0e8;padding:5px 9px;font-size:12px}
.szzz-agent-filter-options button:hover,.szzz-agent-filter-options button.is-active{border-color:#ad69d3;background:#57346d;color:#fff}
.szzz-agent-filter-actions{grid-column:1 / -1;display:flex;justify-content:flex-end}
.szzz-agent-filter-reset{border-color:#675173;color:#eadbf1;background:transparent}
.szzz-ent-wrap-zzz_agent .szzz-ent-count{color:#aeb7c4;margin:9px 1px 12px}
/* Flex-wrap: เต็มแถว 4 ใบตามปกติ · ผลกรองเหลือน้อยจะอยู่กลางแถว ไม่ชิดซ้าย */
.szzz-ent-wrap-zzz_agent .szzz-ent-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.szzz-ent-wrap-zzz_agent a.szzz-ent{flex:0 1 calc((100% - 36px) / 4);max-width:calc((100% - 36px) / 4);box-sizing:border-box}
.szzz-ent-wrap-zzz_agent a.szzz-ent{position:relative;display:flex;justify-content:flex-end;min-height:198px;border-color:#363d48;border-radius:12px;background:#1c222b;color:#fff;box-shadow:none}
.szzz-ent-wrap-zzz_agent a.szzz-ent.szzz-hide{display:none}
.szzz-ent-wrap-zzz_agent a.szzz-ent:before{content:"";position:absolute;z-index:2;left:0;top:0;bottom:0;width:3px;background:#b56be0}
.szzz-ent-wrap-zzz_agent a.szzz-ent:hover{border-color:#c076e5;box-shadow:0 8px 24px rgba(0,0,0,.35);transform:translateY(-2px)}
.szzz-ent-wrap-zzz_agent .szzz-ent-media{position:absolute;inset:0;aspect-ratio:auto;background:#1c222b}
.szzz-ent-wrap-zzz_agent .szzz-ent-img{inset:7px;width:calc(100% - 14px);height:calc(100% - 14px)}
.szzz-ent-wrap-zzz_agent .szzz-ent-ttl{position:relative;z-index:3;width:100%;padding:58px 13px 12px;background:linear-gradient(0deg,rgba(12,15,20,.98) 0%,rgba(12,15,20,.83) 45%,rgba(12,15,20,0) 100%);box-sizing:border-box}
.szzz-ent-wrap-zzz_agent .szzz-ent-name{font-size:19px;color:#fff;text-shadow:0 1px 3px #000;margin-bottom:7px}
.szzz-ent-wrap-zzz_agent .szzz-tag{font-size:10.5px;padding:1px 7px;background:#252c36;color:#edf0f5;border:1px solid #3c4653}
.szzz-ent-wrap-zzz_agent .szzz-tag.el{color:#8fc0ff}.szzz-ent-wrap-zzz_agent .szzz-tag.sp{color:#96e4b7}
.szzz-ent-wrap-zzz_agent .szzz-tag.rk.szzz-tag-rk-rank-s{background:#3c3215;color:#ffdb73;border-color:#b78b20}
.szzz-ent-wrap-zzz_agent .szzz-tag.rk.szzz-tag-rk-rank-a{background:#3a244b;color:#e3baff;border-color:#9555bf}

/* ===== หน้าเดี่ยว (single page) รายละเอียดครบ ===== */
.szzz-single{margin:0 0 18px}
.szzz-single-head{display:flex;align-items:flex-start;gap:18px;margin-bottom:14px;flex-wrap:wrap}
.szzz-single-img{width:128px;height:128px;object-fit:contain;background:#f4f5f7;border-radius:14px;flex:none}
.szzz-single-ttl{min-width:0}
.szzz-single-name{margin:0 0 8px;font-size:26px;font-weight:800;line-height:1.2}
.szzz-single-body{border-top:1px solid #eef0f2;padding-top:12px}
.szzz-single-body .szzz-fld{margin:12px 0}
.szzz-single-body .szzz-fld-v{font-size:15px}

/* ===== หน้าเดี่ยวตัวละคร (แบ่งเป็นส่วน) ===== */
.szzz-single-agent .szzz-single-media{width:180px;flex:none}
.szzz-single-agent .szzz-single-media{aspect-ratio:3/4;background:#f4f5f7;border-radius:14px;overflow:hidden;position:relative}
.szzz-single-agent .szzz-single-img{width:100%;height:100%;position:absolute;inset:0;object-fit:contain;border-radius:0}
.szzz-single-agent .szzz-single-img.szzz-agent-cropped{object-fit:cover;object-position:var(--szzz-focus-x,50%) var(--szzz-focus-y,50%);transform:scale(var(--szzz-zoom,1));transform-origin:var(--szzz-focus-x,50%) var(--szzz-focus-y,50%)}
.szzz-single-agent .szzz-ent-img-placeholder{position:absolute;inset:0}
.szzz-single-faction{margin-top:12px;font-size:14px;color:#555}
.szzz-single-faction b{color:#222;font-weight:700}
.szzz-tag.at{background:#f3eef9;color:#6a3fa0}
.szzz-single-section{margin:18px 0 0}
.szzz-single-section>h3{margin:0 0 2px;font-size:18px;font-weight:800;line-height:1.3;padding-bottom:6px;border-bottom:2px solid #5b4bde;display:inline-block}
.szzz-single-section .szzz-single-body{border-top:none;padding-top:6px}
.szzz-single-section .szzz-fld-l{font-size:12.5px;color:#5b4bde}

@media(max-width:820px){
	.szzz-ent-wrap-zzz_engine .szzz-ent-grid,
	.szzz-ent-wrap-zzz_bangboo .szzz-ent-grid,
	.szzz-ent-wrap-zzz_boss .szzz-ent-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
	.szzz-ent-wrap-zzz_agent{padding:16px}
	.szzz-ent-wrap-zzz_agent a.szzz-ent{flex-basis:calc((100% - 12px) / 2);max-width:calc((100% - 12px) / 2)}
	.szzz-agent-filter-panel{grid-template-columns:1fr}
}
@media(max-width:540px){
	.szzz-ent-wrap-zzz_engine .szzz-ent-grid,
	.szzz-ent-wrap-zzz_bangboo .szzz-ent-grid,
	.szzz-ent-wrap-zzz_boss .szzz-ent-grid{grid-template-columns:1fr}
	.szzz-ent-wrap-zzz_agent a.szzz-ent{flex-basis:100%;max-width:100%}
	.szzz-ent-wrap-zzz_agent .szzz-ent-search{max-width:none}
}

@media(prefers-color-scheme:dark){
	a.szzz-ent{background:#171b21;border-color:#252b33}
	.szzz-ent-name,.szzz-single-name{color:#f0f2f5}
	.szzz-ent-media,.szzz-ent-img,.szzz-single-img{background:#20262e}
	.szzz-ent-search{background:#171b21;color:#e7eaee;border-color:#252b33}
	.szzz-ent-body,.szzz-single-body{border-color:#242a31}
	.szzz-fld-v{color:#dfe3e8}
	.szzz-tag{background:#232830;color:#c3c8cf}
	.szzz-tag.at{background:#2a2440;color:#c3a9f0}
	.szzz-legend{background:#141820;border-color:#242a31;color:#aeb4bd}
	.szzz-single-agent .szzz-single-media{background:#20262e}
	.szzz-single-faction{color:#aeb4bd}
	.szzz-single-faction b{color:#eef1f5}
	.szzz-single-section>h3{color:#f0f2f5;border-color:#7a6cff}
}