/* FFRS Wiki — light default + optional dark */
:root{
  --bg:#f5f6f3; --surface:#ffffff; --surface2:#f0f2ee; --surface3:#e8ece6;
  --text:#1d2521; --muted:#66736c; --faint:#98a49d;
  --border:#dfe5de; --accent:#1f6f67; --accent2:#b8892b; --accent-soft:#e3f0ec;
  --danger:#b3493f; --good:#2f7d52;
  --shadow:0 1px 2px rgba(20,40,30,.05),0 8px 24px rgba(20,40,30,.06);
  --radius:10px; --serif:Georgia,"Noto Serif SC","Songti SC",serif;
}
body[data-theme="dark"]{
  --bg:#121815; --surface:#1a221e; --surface2:#212b25; --surface3:#2a352e;
  --text:#e8efe9; --muted:#9caea3; --faint:#77887d;
  --border:#334137; --accent:#65c9b8; --accent2:#e0bb62; --accent-soft:#1e3a34;
  --danger:#e58478; --good:#7dc99a;
  --shadow:0 1px 2px rgba(0,0,0,.25),0 8px 24px rgba(0,0,0,.3);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{background:var(--bg);color:var(--text);font:14px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
button,input,select{font:inherit}
button{cursor:pointer}
kbd{font:11px ui-monospace,monospace;background:var(--surface3);border:1px solid var(--border);border-radius:4px;padding:1px 6px;color:var(--muted)}

/* ---------- topbar ---------- */
.topbar{height:62px;display:flex;align-items:center;gap:20px;padding:0 22px;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:30}
.brand{display:flex;align-items:center;gap:11px;color:var(--text);text-decoration:none;min-width:220px}
.brand:hover{text-decoration:none}
.brand-mark{font:700 19px/1 var(--serif);letter-spacing:.5px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;padding:8px 9px;border-radius:8px}
.brand-mark span{opacity:.75}
.brand-text{display:flex;flex-direction:column;line-height:1.25}
.brand-text strong{font-size:15px;letter-spacing:.5px}
.brand-text small{font-size:9px;letter-spacing:1.4px;color:var(--faint)}
.topsearch{flex:1;max-width:520px;position:relative}
.topsearch input{width:100%;height:36px;padding:0 38px 0 13px;border:1px solid var(--border);border-radius:8px;background:var(--surface2);color:var(--text);outline:none}
.topsearch input:focus{border-color:var(--accent);background:var(--surface)}
.topsearch kbd{position:absolute;right:9px;top:8px}
.top-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.lang-switch{display:flex;align-items:center;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--surface2)}
.lang-switch select{height:34px;padding:0 8px;border:0;background:transparent;color:var(--text);font-size:12px;outline:none;max-width:210px;cursor:pointer}
.lang-switch .dev-btn{border:0;border-left:1px solid var(--border);background:transparent;color:var(--faint);padding:0 9px;height:34px;font:10px ui-monospace,monospace;letter-spacing:.5px}
.lang-switch .dev-btn.on{background:var(--accent);color:#fff}
.icon-btn{width:34px;height:34px;border:1px solid var(--border);border-radius:8px;background:var(--surface2);color:var(--text);font-size:17px}

/* ---------- layout ---------- */
.layout{display:flex;min-height:calc(100vh - 62px - 46px)}
.sidebar{width:228px;flex:0 0 228px;background:var(--surface);border-right:1px solid var(--border);padding:18px 12px;display:flex;flex-direction:column;position:sticky;top:62px;height:calc(100vh - 62px);overflow-y:auto}
.nav-group{margin-bottom:18px}
.nav-group h4{margin:0 0 7px 10px;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--faint);font-weight:700}
.nav-item{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:7px;color:var(--muted);font-size:13px;cursor:pointer;border:0;width:100%;text-align:left;background:transparent}
.nav-item:hover{background:var(--surface2);color:var(--text);text-decoration:none}
.nav-item.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.nav-item .ico{width:18px;text-align:center;font-size:14px}
.nav-item .cnt{margin-left:auto;font-size:10px;color:var(--faint);font-variant-numeric:tabular-nums}
.side-foot{margin-top:auto;padding:12px 8px 0;border-top:1px solid var(--border)}
.side-note{font-size:11px;color:var(--muted);line-height:1.6}
.side-meta{font-size:10px;color:var(--faint);margin-top:8px;font-variant-numeric:tabular-nums}
.main{flex:1;min-width:0;padding:28px 32px 48px;max-width:1500px}

/* ---------- common ---------- */
.page-head{margin-bottom:22px}
.page-head h1{font:600 27px/1.3 var(--serif);margin:0 0 6px;letter-spacing:.5px}
.page-head p{margin:0;color:var(--muted);font-size:13px;max-width:820px}
.eyebrow{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--accent2);font-weight:700;margin-bottom:7px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.hero{background:linear-gradient(135deg,var(--surface),var(--surface2));border:1px solid var(--border);border-radius:14px;padding:34px 36px;margin-bottom:24px;position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;right:-70px;top:-90px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,var(--accent-soft),transparent 70%);opacity:.9}
.hero h1{font:600 34px/1.25 var(--serif);margin:0 0 10px;position:relative}
.hero p{margin:0;color:var(--muted);max-width:660px;position:relative;font-size:14px}
.hero .chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px;position:relative}
.hero-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px;position:relative}
.hero-btn{height:36px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-size:12px;font-weight:600;cursor:pointer;color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.hero-btn:hover{filter:brightness(1.08)}
.hero-btn.ghost{color:var(--muted);border-color:var(--border);background:var(--surface)}
.nav-item.nav-link{text-decoration:none}
.visit-strip{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-top:18px;padding-top:14px;border-top:1px solid var(--border);position:relative;font-size:12px}
.visit-strip[hidden]{display:none}
.vs-i{color:var(--muted)}
.vs-i b{font-size:16px;color:var(--text);font-variant-numeric:tabular-nums;margin-right:4px}
.vs-i.ai b{color:#7c4ddb}
body[data-theme="dark"] .vs-i.ai b{color:#c58bff}
.visit-strip .vs-link{margin-left:auto;color:var(--accent);font-weight:600;font-size:12px;text-decoration:none}
.visit-strip .vs-link:hover{text-decoration:underline}
.chip{display:inline-flex;align-items:center;gap:5px;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:4px 11px;font-size:11px;color:var(--muted)}
.chip b{color:var(--accent);font-variant-numeric:tabular-nums}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px;margin-bottom:24px}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:15px 16px;cursor:pointer;transition:transform .15s,border-color .15s}
.stat-card:hover{transform:translateY(-2px);border-color:var(--accent);text-decoration:none}
.stat-card .n{font:600 23px/1.2 var(--serif);color:var(--accent);font-variant-numeric:tabular-nums}
.stat-card .l{font-size:12px;color:var(--muted);margin-top:3px}
.stat-card .s{font-size:10px;color:var(--faint);margin-top:5px}
.section-title{font:600 17px/1.4 var(--serif);margin:26px 0 12px}
.quick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:11px}
.quick{background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:14px;cursor:pointer;color:var(--text)}
.quick:hover{border-color:var(--accent);text-decoration:none}
.quick .qh{font-weight:600;font-size:13px;margin-bottom:4px}
.quick .qd{font-size:11px;color:var(--muted);line-height:1.5}

/* ---------- toolbar / table ---------- */
.toolbar{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:13px}
.toolbar input[type=search],.toolbar select{height:34px;padding:0 10px;border:1px solid var(--border);border-radius:7px;background:var(--surface);color:var(--text);outline:none;font-size:12px}
.toolbar input[type=search]{min-width:230px;flex:1;max-width:360px}
.toolbar select{max-width:190px}
.toolbar .hint{font-size:11px;color:var(--faint);margin-left:auto;font-variant-numeric:tabular-nums}
.btn{height:34px;padding:0 12px;border:1px solid var(--border);border-radius:7px;background:var(--surface);color:var(--muted);font-size:12px}
.btn.on{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
.table-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse;font-size:12.5px}
thead th{background:var(--surface2);text-align:left;padding:10px 12px;font-size:11px;letter-spacing:.5px;color:var(--muted);font-weight:700;border-bottom:1px solid var(--border);white-space:nowrap;position:sticky;top:0;z-index:2}
thead th.sortable{cursor:pointer;user-select:none}
thead th.sortable:hover{color:var(--accent)}
tbody td{padding:9px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr{cursor:pointer}
tbody tr:hover{background:var(--surface2)}
td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.name-cell{font-weight:600;color:var(--text)}
.sub-cell{font-size:10.5px;color:var(--faint);margin-top:1px}
.badge{display:inline-block;padding:2px 7px;border-radius:5px;font-size:10px;background:var(--surface3);color:var(--muted);white-space:nowrap}
.badge.acc{background:var(--accent-soft);color:var(--accent)}
.badge.gold{background:rgba(184,137,43,.14);color:var(--accent2)}
.badge.red{background:rgba(179,73,63,.12);color:var(--danger)}
.tag{display:inline-block;padding:1px 6px;border:1px solid var(--border);border-radius:4px;font-size:10px;color:var(--muted);margin:1px 3px 1px 0;white-space:nowrap}
.muted{color:var(--muted)}
.faint{color:var(--faint)}
.empty{padding:46px;text-align:center;color:var(--faint)}
.pager{display:flex;align-items:center;justify-content:center;gap:8px;padding:13px;font-size:12px;color:var(--muted);border-top:1px solid var(--border)}
.pager button{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:6px;padding:4px 11px;font-size:12px}
.pager button:disabled{opacity:.4;cursor:default}

/* ---------- drawer ---------- */
.drawer-backdrop{position:fixed;inset:0;background:rgba(10,20,15,.45);opacity:0;pointer-events:none;transition:opacity .2s;z-index:40}
.drawer-backdrop.show{opacity:1;pointer-events:auto}
.drawer{position:fixed;right:0;top:0;bottom:0;width:min(480px,94vw);background:var(--surface);border-left:1px solid var(--border);z-index:41;transform:translateX(101%);transition:transform .22s ease;overflow-y:auto;box-shadow:-10px 0 40px rgba(0,0,0,.16)}
.drawer.show{transform:translateX(0)}
.drawer-inner{padding:24px 26px 50px}
.drawer-close{float:right;border:0;background:var(--surface2);color:var(--muted);width:30px;height:30px;border-radius:7px;font-size:16px}
.drawer h2{font:600 23px/1.3 var(--serif);margin:6px 0 3px}
.drawer .did{font:11px ui-monospace,monospace;color:var(--faint);letter-spacing:1px}
.kv{display:grid;grid-template-columns:110px 1fr;gap:7px 12px;font-size:12.5px;margin:16px 0}
.kv dt{color:var(--faint)}
.kv dd{margin:0}
.drawer h3{font:600 13px/1.4 var(--serif);margin:22px 0 9px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.param-row{display:flex;justify-content:space-between;padding:6px 10px;background:var(--surface2);border-radius:6px;margin-bottom:5px;font-size:12.5px}
.param-row b{font-variant-numeric:tabular-nums;color:var(--accent)}
.desc-box{background:var(--surface2);border-left:3px solid var(--accent2);border-radius:0 6px 6px 0;padding:10px 12px;font-size:12.5px;white-space:pre-wrap;margin-bottom:8px}
.src-item{padding:7px 0;border-bottom:1px dashed var(--border);font-size:12px}
.src-item:last-child{border-bottom:0}

/* ---------- misc pages ---------- */
.prose{max-width:860px;font-size:13.5px;line-height:1.85}
.prose h2{font:600 19px/1.4 var(--serif);margin:28px 0 10px;padding-bottom:7px;border-bottom:1px solid var(--border)}
.prose h3{font:600 15px/1.4 var(--serif);margin:20px 0 8px}
.prose p{margin:9px 0;color:var(--muted)}
.prose ul{padding-left:20px;color:var(--muted)}
.prose li{margin:4px 0}
.prose code{background:var(--surface3);padding:1px 5px;border-radius:4px;font:12px ui-monospace,monospace;color:var(--accent)}
.prose pre{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:13px;overflow:auto;font:12px/1.6 ui-monospace,monospace;color:var(--text)}
.prose table{margin:12px 0;font-size:12px}
.callout{background:var(--accent-soft);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:0 8px 8px 0;padding:12px 15px;margin:14px 0;color:var(--text);font-size:12.5px}
.link-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:11px}
.link-card{display:block;padding:14px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--text)}
.link-card:hover{border-color:var(--accent);text-decoration:none}
.link-card b{display:block;margin-bottom:4px}
.link-card span{font-size:11px;color:var(--muted)}
.link-card .link-url{display:block;margin-top:7px;color:var(--accent);font-size:11px;word-break:break-all}
.footer{border-top:1px solid var(--border);background:var(--surface);padding:12px 24px;font-size:11px;color:var(--faint);display:flex;gap:16px;flex-wrap:wrap}
.footer a{color:var(--muted)}

/* ---------- multilingual / media ---------- */
.thumb{vertical-align:middle;object-fit:contain;margin-right:7px;border-radius:4px;background:var(--surface2)}
.drawer .thumb{float:right;width:72px;height:72px;margin:0 0 6px 12px}
/* Vision_Face 官方头像：透明 PNG + 银色边框，浅/深主题都保持底色不糊 */
.thumb.face{background:transparent;border-radius:6px}
.drawer .thumb.face{width:96px;height:96px}
.face-missing{display:inline-block;text-align:center;border:1px dashed var(--border);background:var(--surface2);color:var(--faint);font-weight:600;font-size:12px}
.portrait-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;margin:0 0 22px}
.portrait-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 6px;text-align:center;cursor:pointer;transition:transform .15s,border-color .15s}
.portrait-card:hover{transform:translateY(-2px);border-color:var(--accent)}
.portrait-img{display:block;width:76px;height:76px;object-fit:contain;margin:0 auto 6px;background:var(--surface2);border-radius:8px}
.pc-name{font-size:12px;font-weight:600;line-height:1.35;color:var(--text);word-break:break-word}
.pc-id{font-size:10px;color:var(--faint);margin-top:3px}
.portrait-hero{display:flex;align-items:center;gap:16px;background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:14px;margin:0 0 16px}
.portrait-big,.portrait-missing{width:128px;height:128px;flex:0 0 128px;background:var(--surface);border-radius:10px}
.portrait-big{object-fit:contain}
.portrait-missing{display:flex;align-items:center;justify-content:center;border:1px dashed var(--border);color:var(--faint);font:600 44px var(--serif)}
.portrait-hero b{font-size:13px}
.portrait-hero .faint{font-size:11px;margin:6px 0}
.portrait-hero code{display:block;font-size:10px;line-height:1.5;word-break:break-all;color:var(--muted)}
.lang-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:11px}
.lang-card{display:block;text-align:left;padding:14px 15px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);transition:border-color .15s,transform .15s}
.lang-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.lang-card.on{border-color:var(--accent);background:var(--accent-soft)}
.lang-card.dev{border-style:dashed}
.lang-card .lc-code{font:11px ui-monospace,monospace;color:var(--faint);letter-spacing:.5px;margin-bottom:7px}
.lang-card .lc-name{font:600 17px/1.3 var(--serif);margin-bottom:2px}
.lang-card .lc-en{font-size:11px;color:var(--muted)}
.lang-card .lc-meta{font-size:10px;color:var(--faint);margin-top:9px;font-variant-numeric:tabular-nums}
.lang-table{width:100%;font-size:11.5px;margin:8px 0;border-collapse:collapse}
.lang-table td{padding:5px 8px;border-bottom:1px solid var(--border);vertical-align:top;word-break:break-word}
.lang-table td:first-child{width:82px}
.lang-table td:nth-child(2){width:120px}
.lang-table tr.cur{background:var(--accent-soft);font-weight:600}
.prose table{width:100%;border-collapse:collapse}
.prose table th,.prose table td{padding:6px 9px;border-bottom:1px solid var(--border);text-align:left}
.prose table th{background:var(--surface2);font-size:11px;color:var(--muted)}

/* ---------- 属性相性图标 ---------- */
.aff{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:7px;background:var(--surface2);
  border:1px solid var(--border);color:var(--ec,var(--muted));vertical-align:middle;margin-right:4px;flex:none}
/* SVG 用元素色、边框与角标用相性色，两条信息互不遮蔽 */
.aff svg{width:17px;height:17px;display:block;color:var(--ec,currentColor)}
.aff i{position:absolute;right:-5px;top:-6px;display:flex;align-items:center;justify-content:center;
  width:13px;height:13px;border-radius:50%;background:var(--surface);border:1px solid currentColor;
  font:700 9px/1 ui-monospace,monospace;font-style:normal}
.aff-e-Fire{--ec:#e26a3f}.aff-e-Ice{--ec:#4a9bd0}.aff-e-Thunder{--ec:#d0a62f}
.aff-e-Water{--ec:#3c9fb5}.aff-e-Wind{--ec:#57a877}.aff-e-Earth{--ec:#a9824f}
.aff-e-Light{--ec:#d6b24a}.aff-e-Dark{--ec:#8a72b8}
.aff-None{opacity:.38}
.aff-Weakness{border-color:rgba(211,83,79,.75)}
.aff-Halved{border-color:rgba(74,144,217,.75)}
.aff-Absorb{border-color:rgba(162,111,212,.75)}
.aff-Invalid{border-color:var(--border);
  background:repeating-linear-gradient(45deg,var(--surface2),var(--surface2) 3px,var(--surface3) 3px,var(--surface3) 6px)}
.aff-Weakness i{color:#d9534f}.aff-Halved i{color:#4a90d9}
.aff-Absorb i{color:#a26fd4}.aff-Invalid i{color:var(--muted)}
body[data-theme="dark"] .aff-e-Fire{--ec:#ff9b74}
body[data-theme="dark"] .aff-e-Ice{--ec:#7cc0ec}
body[data-theme="dark"] .aff-e-Thunder{--ec:#f0ca62}
body[data-theme="dark"] .aff-e-Water{--ec:#6fc9dd}
body[data-theme="dark"] .aff-e-Wind{--ec:#82d3a4}
body[data-theme="dark"] .aff-e-Earth{--ec:#d6ae79}
body[data-theme="dark"] .aff-e-Light{--ec:#f5d878}
body[data-theme="dark"] .aff-e-Dark{--ec:#b59ae2}
body[data-theme="dark"] .aff-Weakness{border-color:#ff8b84}
body[data-theme="dark"] .aff-Halved{border-color:#7db8f0}
body[data-theme="dark"] .aff-Absorb{border-color:#c79aea}
body[data-theme="dark"] .aff-Weakness i{color:#ff8b84}
body[data-theme="dark"] .aff-Halved i{color:#7db8f0}
body[data-theme="dark"] .aff-Absorb i{color:#c79aea}
.aff-sm{width:22px;height:22px;border-radius:5px;margin-right:2px}
.aff-sm svg{width:15px;height:15px}
.aff-sm i{right:-3px;top:-5px;font-size:9px}
.aff-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:8px 0 12px}
.aff-cell{display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 3px;
  border:1px solid var(--border);border-radius:8px;background:var(--surface2)}
.aff-cell .aff{width:34px;height:34px;margin:0}
.aff-cell .aff svg{width:22px;height:22px}
.aff-label{font-size:11px;color:var(--muted);line-height:1.2}
.aff-state{font-size:10px;color:var(--faint);line-height:1.2;text-align:center}
.cond-table{width:100%;font-size:12px}
.cond-table td{max-width:300px;word-break:break-word}
.cond-table code{font-size:10.5px;word-break:break-all;color:var(--muted)}
.detail-link{color:var(--accent);font-weight:600}

/* 表格「获取来源」列：与详情同源，列出全部条目并紧凑换行 */
.src-cell{display:flex;flex-wrap:wrap;gap:3px;max-width:320px;line-height:1.35}
.src-chip{display:inline-block;padding:1px 6px;border:1px solid var(--border);border-radius:5px;
  background:var(--surface2);font-size:10.5px;color:var(--text)}
.src-chip i{font-style:normal;color:var(--accent);margin-right:3px}
/* 敌人掉落 / 偷窃分组 */
.drop-mini{display:inline-block;margin-right:5px;padding:2px 6px;border-radius:5px;font-size:10px;
  border:1px solid var(--border);color:var(--muted);white-space:nowrap}
.drop-mini.d{border-color:rgba(31,111,103,.45);color:var(--accent)}
.drop-mini.s{border-color:rgba(184,137,43,.5);color:var(--accent2)}
.drop-head{margin:12px 0 5px;font-size:12px;font-weight:700}
.drop-table{width:100%;font-size:12px;margin-bottom:6px}
.drop-table th{text-align:left;color:var(--muted);font-weight:600}
.drop-table td,.drop-table th{padding:5px 8px;border-bottom:1px solid var(--border)}
.drop-table td:last-child,.drop-table th:last-child{text-align:right;white-space:nowrap}
/* 参考与致谢卡片为原站外链，保留悬停高亮 */
.link-card:hover{border-color:var(--accent)}

@media(max-width:900px){
  .sidebar{display:none}.main{padding:20px 16px 40px}.topbar{padding:0 12px;gap:10px}
  .brand-text{display:none}.brand{min-width:auto}.topsearch kbd{display:none}
  .hero{padding:24px}.hero h1{font-size:26px}
  .aff-grid{grid-template-columns:repeat(4,1fr)}
  .portrait-hero{flex-direction:column;align-items:flex-start;gap:10px}
  .portrait-big,.portrait-missing{width:104px;height:104px;flex-basis:104px}
  .portrait-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
}