/* The Belt: six slots in the Shade's band. Peek the strip and this is what you see; open the system and it stays on top.
   A slot is a cartridge: the art or the initial on a slab with its rarity pixel at the corner, the title, the date it
   landed, and the line in its parts (what happened, how rare, what it was) so nothing is ever cut mid-word.
   Empty slots are frames with a small plus, the mark of a place something can land. Signed-in only. */
#osbelt { height: 132px; box-sizing: border-box; padding: 14px 28px 16px; display: grid; grid-template-rows: auto 1fr; gap: 10px; border-bottom: 1px solid var(--line); }
#osbelt[hidden] { display: none; }
.belt-head { display: flex; align-items: center; gap: 10px; font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bone-45); }
.belt-head .px { display: inline-block; width: 6px; height: 6px; border-radius: 1px; background: var(--bone-45); }
.belt-head .px.g { background: var(--g); box-shadow: 0 0 8px var(--g); }
.belt-head b { color: var(--bone-70); font-weight: 500; }
.belt-hint { margin-left: auto; display: inline-flex; align-items: center; gap: 12px; color: var(--bone-45); }
.belt-hint b { color: var(--bone-70); font-weight: 500; border: 1px solid var(--line); border-radius: 3px; padding: 3px 5px; margin-right: 6px; }
.belt-slots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; min-height: 0; }
.slot { position: relative; min-height: 0; border: 1px solid var(--line); border-radius: 6px; background: rgba(255, 250, 248, .025); overflow: hidden; outline: none; transition: border-color .5s var(--ease), background .5s var(--ease), transform .6s var(--ease); }
/* the plus: two hairlines, a place for something */
.slot.empty::before, .slot.empty::after { content: ''; position: absolute; left: 50%; top: 50%; background: rgba(255, 250, 248, .22); transform: translate(-50%, -50%); transition: background .4s var(--ease), width .4s var(--ease), height .4s var(--ease); }
.slot.empty::before { width: 12px; height: 1px; } .slot.empty::after { width: 1px; height: 12px; }
.slot.empty:hover { border-color: rgba(255, 250, 248, .18); }
.slot.empty:hover::before { width: 16px; background: rgba(255, 250, 248, .45); } .slot.empty:hover::after { height: 16px; background: rgba(255, 250, 248, .45); }
.slot.item, .slot.more { cursor: pointer; }
.slot.item { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 10px 8px 8px; background: rgba(21, 22, 26, .7); text-align: left; }
.slot.item:hover, .slot.item:focus-visible, .slot.more:hover, .slot.more:focus-visible { border-color: rgba(255, 250, 248, .3); transform: translateY(-1px); }
/* the slab: art, or the initial in pixel type, with the rarity pixel at its corner */
.slot-art { position: relative; width: 52px; height: 52px; border-radius: 4px; overflow: hidden; background: rgba(255, 250, 248, .05); border: 1px solid rgba(255, 250, 248, .08); display: grid; place-items: center; align-self: center; transition: border-color .4s var(--ease), background .4s var(--ease); }
.slot.item:hover .slot-art, .slot.item:focus-visible .slot-art { border-color: rgba(255, 250, 248, .22); background: rgba(255, 250, 248, .08); }
.slot-art img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.85) brightness(.85); transition: filter .5s var(--ease), transform .8s var(--ease); }
.slot.item:hover .slot-art img, .slot.item:focus-visible .slot-art img { filter: none; transform: scale(1.05); }
.slot-glyph { font-family: 'Doto', var(--mono); font-weight: 800; font-size: 24px; line-height: 1; color: var(--bone-70); font-style: normal; transition: color .3s var(--ease); }
.slot.item:hover .slot-glyph, .slot.item:focus-visible .slot-glyph { color: var(--bone); }
.slot-rar { position: absolute; right: 4px; top: 4px; width: 5px; height: 5px; border-radius: 1px; background: var(--bone-45); }
.slot-rar.g { background: var(--g); box-shadow: 0 0 6px var(--g); }
.slot-rar.b { background: #2E7BFF; box-shadow: 0 0 6px #2E7BFF; }
.slot-rar.r { background: var(--r); box-shadow: 0 0 6px var(--r); }
/* the body: the title owns its line; under it the verb, the rarity and the date; under that one line of what it was */
.slot-body { display: grid; gap: 4px; min-width: 0; align-content: center; }
.slot-title { font: 600 12.5px/1.2 var(--sans); color: var(--bone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.slot-at { margin-left: auto; flex: none; font: 700 10px/1 'Doto', var(--mono); letter-spacing: .06em; color: var(--bone-45); font-variant-numeric: tabular-nums; }
.slot-meta { display: flex; align-items: center; gap: 8px; min-width: 0; font: 500 8.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--bone-45); white-space: nowrap; overflow: hidden; }
.slot-meta em { font-style: normal; flex: none; }
.slot-meta em.v { color: var(--bone-55, rgba(255, 250, 248, .55)); }
.slot-meta em.k { display: inline-flex; align-items: center; gap: 5px; color: var(--bone-70); }
.slot-meta em.k::before { content: ''; width: 5px; height: 5px; border-radius: 1px; background: var(--bone-45); }
.slot-meta em.k.g::before { background: var(--g); } .slot-meta em.k.b::before { background: #2E7BFF; } .slot-meta em.k.r::before { background: var(--r); }
.slot-d { min-width: 0; font: 500 10px/1.3 var(--sans); color: var(--bone-55, rgba(255, 250, 248, .55)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot.item:hover .slot-meta, .slot.item:focus-visible .slot-meta, .slot.item:hover .slot-d, .slot.item:focus-visible .slot-d { color: var(--bone-70); }
.slot-frame { position: absolute; inset: 7px; border: 1px solid rgba(255, 250, 248, 0); border-radius: 3px; pointer-events: none; transition: inset .6s var(--ease), border-color .6s var(--ease); }
.slot.item:hover .slot-frame, .slot.item:focus-visible .slot-frame { inset: 3px; border-color: rgba(255, 250, 248, .28); }
.slot.new::before { content: ''; position: absolute; right: 7px; top: 7px; width: 6px; height: 6px; border-radius: 1px; background: var(--g); box-shadow: 0 0 8px var(--g); z-index: 1; }
/* the rest: a deck of slabs, the count on the front one, the word beneath */
.slot.more { display: grid; grid-template-rows: auto auto; justify-items: center; align-content: center; gap: 9px; }
.slot.more .deck { position: relative; grid-row: 1; grid-column: 1; width: 48px; height: 30px; pointer-events: none; }
.slot.more .deck i { position: absolute; inset: 0; border: 1px solid rgba(255, 250, 248, .14); border-radius: 3px; background: #15161a; transition: transform .5s var(--ease), border-color .5s var(--ease); }
.slot.more .deck i:nth-child(1) { transform: rotate(-6deg) translateY(-7px); }
.slot.more .deck i:nth-child(2) { transform: rotate(3deg) translateY(-3px); }
.slot.more:hover .stack i, .slot.more:focus-visible .stack i { border-color: rgba(255, 250, 248, .3); }
.slot.more:hover .stack i:nth-child(1), .slot.more:focus-visible .stack i:nth-child(1) { transform: rotate(-9deg) translateY(-10px); }
.slot.more:hover .stack i:nth-child(2), .slot.more:focus-visible .stack i:nth-child(2) { transform: rotate(4deg) translateY(-5px); }
.slot.more b { position: relative; grid-row: 1; grid-column: 1; align-self: center; font-family: 'Doto', var(--mono); font-weight: 800; font-size: 18px; line-height: 1; color: var(--bone); }
.slot.more span:not(.deck) { grid-row: 2; grid-column: 1; font: 500 8.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--bone-45); }
@media (max-width: 1400px) { .slot.item { grid-template-columns: 44px minmax(0, 1fr); gap: 8px; padding: 8px 8px 8px 7px; } .slot-art { width: 44px; height: 44px; } .slot-glyph { font-size: 20px; } }
@media (max-width: 1250px) { .slot-d, .slot-at { display: none; } }
@media (max-width: 1000px) { .belt-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); } #osbelt { height: auto; } .belt-hint { display: none; } .slot-d, .slot-at { display: block; } }
@media (prefers-reduced-motion: reduce) { .slot, .slot-art, .slot-art img, .slot-frame, .slot.empty::before, .slot.empty::after, .slot.more .deck i { transition: none; } }