body{--cell-size:40px;--grid-gap:2px;--grid-padding:10px;--grid-size:11;--history-visible-slots:8;--history-padding-y:.5rem;--history-padding-x:.9rem;--detail-width:270px;--details-line-height:1.25rem;color:#fff;background:#003;flex-direction:column;justify-content:center;align-items:center;gap:1.5rem;min-height:100vh;margin:0;font-family:sans-serif;display:flex}.controls{background:#ffffff1a;border-radius:6px;flex-direction:row;align-items:center;gap:10px;padding:.35rem .6rem;display:flex;box-shadow:0 0 0 1px #ffffff1f}label{color:inherit;font-weight:600}select{color:inherit;min-width:220px;font:inherit;background:#ffffff14;border:1px solid #ffffff40;border-radius:4px;padding:.3rem .45rem}select:disabled{opacity:.65;cursor:not-allowed}.status{color:#8d8d8d;min-height:var(--details-line-height);text-align:center}.grid{gap:var(--grid-gap);padding:var(--grid-padding);box-sizing:border-box;grid-template-columns:repeat(var(--grid-size), var(--cell-size));grid-auto-rows:var(--cell-size);inline-size:calc((var(--grid-size) * var(--cell-size)) + ((var(--grid-size) - 1) * var(--grid-gap)) + (2 * var(--grid-padding)));min-block-size:calc((var(--grid-size) * var(--cell-size)) + ((var(--grid-size) - 1) * var(--grid-gap)) + (2 * var(--grid-padding)));display:grid}.cell{width:var(--cell-size);height:var(--cell-size);min-width:var(--cell-size);min-height:var(--cell-size);max-width:var(--cell-size);max-height:var(--cell-size);box-sizing:border-box;flex:0 0 var(--cell-size);cursor:pointer;perspective:500px;background:#0c142ca6;border:1px solid #ffffff14;border-radius:6px;justify-content:center;align-items:center;padding:0;transition:border-color .12s,transform .12s,box-shadow .12s,background .12s;display:flex;position:relative}.cell:hover:not(:disabled){background:#12224ae6;border-color:#60a5fa;transform:translateY(-1px)}.cell:disabled{cursor:default}.cell.focus{background:#3626088c;border-color:#f59e0b}.cell.missing{background:#24262ee6}.cell-card{border-radius:inherit;width:100%;height:100%;transform-style:preserve-3d;transition:transform var(--flip-duration,1.4s) cubic-bezier(.16, .84, .24, 1) var(--flip-delay,0s);will-change:transform;position:relative}.cell-card.is-flipping{transform:rotateY(180deg)}.cell-card.is-resetting{transition:none}.cell-card-face{border-radius:inherit;backface-visibility:hidden;background:linear-gradient(#ffffff1f,#ffffff08),#0a1228eb;justify-content:center;align-items:center;display:flex;position:absolute;inset:0;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff0f,0 2px 6px #00000047}.cell-card-face-back{transform:rotateY(180deg)}.cell.focus .cell-card-face{background:linear-gradient(#f59e0b33,#f59e0b0a),#2e1f08eb}.cell.missing .cell-card-face{background:linear-gradient(#ffffff14,#ffffff05),#24262ef2}.cell img{object-fit:contain;width:100%;min-width:100%;height:100%;min-height:100%;image-rendering:pixelated;pointer-events:none;display:block}.cell-fallback{box-sizing:border-box;color:#ffffffb8;text-align:center;pointer-events:none;justify-content:center;align-items:center;width:100%;height:100%;padding:.25rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.62rem;line-height:1;display:flex}.cell-fallback[hidden]{display:none}.cell.focus .cell-fallback{color:#fcd34d}.grid-notice{color:#8d8d8d;text-align:center;box-sizing:border-box;background:#ffffff0f;border-radius:8px;grid-column:1/-1;justify-content:center;align-items:center;min-height:100%;padding:1rem;display:flex;box-shadow:0 0 0 1px #ffffff1a}.details{min-height:var(--details-line-height);flex-direction:column;align-items:center;gap:.5rem;display:flex}.icon-history{width:calc((var(--history-visible-slots) * var(--cell-size)) + ((var(--history-visible-slots) - 1) * var(--grid-gap)) + (2 * var(--history-padding-x)));padding:var(--history-padding-y) var(--history-padding-x);box-sizing:border-box;min-height:calc(var(--cell-size) + (2 * var(--history-padding-y)));background:#ffffff14;border-radius:8px;align-items:center;display:flex;box-shadow:0 0 0 1px #ffffff1f}.icon-history-strip{width:100%;min-height:var(--cell-size);grid-auto-flow:column;grid-auto-columns:var(--cell-size);gap:var(--grid-gap);scrollbar-gutter:stable;display:grid;overflow:auto hidden}.history-slot{width:var(--cell-size);height:var(--cell-size);min-width:var(--cell-size);min-height:var(--cell-size);max-width:var(--cell-size);max-height:var(--cell-size);box-sizing:border-box;border-radius:6px}.history-entry{cursor:pointer;background:#0c142ca6;border:1px solid #ffffff14;justify-content:center;align-items:center;padding:0;transition:border-color .12s,transform .12s,box-shadow .12s,background .12s;display:flex;position:relative;overflow:hidden}.history-entry:hover:not(:disabled){background:#12224ae6;border-color:#60a5fa;transform:translateY(-1px)}.history-entry:disabled{cursor:default}.history-entry.missing{background:#24262ef2}.history-entry img{object-fit:contain;width:100%;min-width:100%;height:100%;min-height:100%;image-rendering:pixelated;pointer-events:none;display:block}.history-slot-placeholder{background:#ffffff08;border:1px dashed #ffffff29}.history-slot-placeholder[data-state=loading]{background-color:#ffffff08;background-image:linear-gradient(90deg,#ffffff08,#ffffff17,#ffffff08),none;background-position:0 0,0 0;background-repeat:repeat,repeat;background-size:200% 100%;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;animation:1.2s linear infinite history-loading}@keyframes history-loading{0%{background-position:200% 0}to{background-position:0 0}}.icon-tooltip{z-index:1000;color:#fff;pointer-events:none;box-sizing:border-box;background:#0a1228f5;border-radius:6px;gap:.2rem;min-width:160px;max-width:min(320px,100vw - 1rem);padding:.45rem .6rem;display:grid;position:fixed;box-shadow:inset 0 0 0 1px #ffffff14,0 8px 24px #0006}.icon-tooltip[hidden]{display:none}.icon-tooltip-hex{color:#8d8d8d;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.75rem}.icon-tooltip-name{overflow-wrap:anywhere}footer{color:#8d8d8d;flex-flow:wrap;align-items:center;gap:1.5rem;min-height:2.25rem;display:flex}footer a,footer a:visited{color:inherit}
