/* 460 GM HUB v2：夜空甲板拼貼。裝飾一律用點陣圖，CSS 只負責排版。 */
@font-face{font-family:"HubMing";src:url(fonts/hub-ming-subset.woff2) format("woff2");font-display:swap}
:root{--pink:#ff3cac;--cyan:#00e5ff;--yel:#ffe95a;--ink:#f3ecff;--win:#140a33;--win2:#1f0f4d}
*{box-sizing:border-box}
html{background:#07041a url(assets/gifs/stars-tile-deep.gif)}
body{margin:0;padding:10px 6px 30px;color:var(--ink);font-family:"PMingLiU","新細明體","MingLiU","細明體","HubMing",serif;font-size:15px;line-height:1.6;-webkit-font-smoothing:none}
img{image-rendering:pixelated;vertical-align:middle;max-width:100%}
a{color:var(--yel)} a:visited{color:#ff9de2} a:hover{color:#000;background:var(--cyan)}
table.lay{width:100%;max-width:1000px;margin:0 auto;border-collapse:separate;border-spacing:8px}
table.lay td{vertical-align:top}
td.l,td.r{width:204px}
.head{position:relative;text-align:center;padding:6px 0 0}
.head .t460{display:block;margin:0 auto -10px}
.head .float{position:absolute}
.blinks{text-align:center;line-height:0;padding:4px 0}
.blinks img{margin:2px}
.win{background:var(--win);border:2px solid var(--pink);outline:2px solid #000;margin:0 0 10px;box-shadow:4px 4px 0 var(--cyan)}
.win.c{border-color:var(--cyan);box-shadow:4px 4px 0 var(--pink)}
.win.y{border-color:var(--yel);box-shadow:4px 4px 0 var(--pink)}
.bar{display:flex;align-items:center;gap:4px;background:var(--win2);border-bottom:2px solid #000;padding:3px 4px;min-height:30px}
.bar .x{margin-left:auto;line-height:0}
.body{padding:8px}
.nav{list-style:none;margin:0;padding:0}
.nav li{padding:2px 0}
.nav a{display:flex;align-items:center;gap:6px}
.nav img{width:32px;height:32px;object-fit:contain}
.wall{line-height:0;text-align:center}
.wall img{width:88px;height:31px;margin:1px}
.slot{border:2px dashed var(--cyan);background:#0a0624 url(assets/gifs/stars-tile-black.gif);display:flex;align-items:center;justify-content:center;flex-direction:column;color:#9c8fd0;text-align:center}
.slot.hero{aspect-ratio:16/7;width:100%}
.slot.filled{border:0;background:none}
.slot.filled img{width:100%;height:100%;object-fit:cover}
.slot .lab{font-size:13px;margin-top:4px}
.entry{display:flex;gap:10px;align-items:center;padding:8px;margin:0 0 8px;background:#0b0626;border:2px ridge #6a4fd8;text-decoration:none}
.entry:hover{background:#26105a}
.entry .pic{flex:0 0 auto;width:72px;text-align:center}
.entry .pic img{max-height:72px}
.entry .txt{flex:1;min-width:0}
.entry .txt img.ttl{display:block;max-width:100%}
.entry .stamp{flex:0 0 auto}
.divider{text-align:center;line-height:0;margin:6px 0;overflow:hidden}
.empty{color:#9c8fd0;font-size:13px;margin:4px 0}
ul.log{list-style:none;margin:0;padding:0;font-size:14px}
ul.log li{padding:3px 0;border-bottom:1px dotted #4b3a8f}
ul.log .date{color:var(--cyan);margin-right:6px;font-size:12px}
.things{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.thing{display:block;border:2px solid var(--yel);background:#0b0626;padding:4px;color:var(--ink);text-decoration:none}
.thing img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.thing b{display:block;font-weight:normal}
.thing small{color:#9c8fd0}
.mini{display:flex;gap:8px;align-items:center}
.mini .slot{width:64px;height:64px;flex:0 0 auto}
.mini .slot .lab{font-size:11px}
.foot{text-align:center;font-size:12px;color:#9c8fd0}
/* 名牌頁 */
.tag{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start}
.tag .slot.avatar{width:180px;height:180px;flex:0 0 auto}
.tag .who{flex:1;min-width:220px}
.tag .who .nm{font-family:"HubMing",serif;font-size:56px;line-height:1;color:var(--yel);text-shadow:3px 3px 0 var(--pink),6px 6px 0 #000}
table.fields{border-collapse:collapse;width:100%;margin-top:8px}
table.fields th{text-align:left;font-weight:normal;color:var(--cyan);width:7em;padding:4px;border-bottom:1px dotted #4b3a8f;vertical-align:top}
table.fields td{padding:4px;border-bottom:1px dotted #4b3a8f}
table.fields td.blank{color:#6c5fa0}
@media (max-width:760px){
 table.lay,table.lay>tbody,table.lay>tbody>tr,table.lay>tbody>tr>td{display:block;width:100%}
 table.lay{border-spacing:0}
 table.lay>tbody>tr{display:flex;flex-direction:column;gap:0}
 td.c{order:1} td.l{order:2} td.r{order:3}
 .head .float{display:none}
 .head .t460{width:220px}
 .nav{display:flex;flex-wrap:wrap;gap:0 14px}
 .entry{flex-wrap:wrap}
 .entry .pic{width:56px}
 .tag .slot.avatar{width:140px;height:140px}
 .tag .who .nm{font-size:44px}
}
@media (prefers-reduced-motion:reduce){img[src$=".gif"]{animation:none}}