/* Bonus pictures: the choice behind a door with extra pictures, and the star on such doors. */
.bonus-picker{max-width:860px;width:calc(100% - 32px);padding:0;overflow:hidden}
.bonus-picker[open]{display:flex;flex-direction:column}
.bonus-head{padding:30px 34px 16px;flex-shrink:0}
.bonus-head h2{margin:10px 0 8px}
.bonus-lead{margin:0;color:var(--muted);max-width:560px}
.bonus-grid{flex:1;min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:16px;padding:8px 34px 22px;overscroll-behavior:contain}
.bonus-card{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:3px;padding:10px 10px 12px;text-align:left;background:var(--white);color:var(--ink);border:1px solid var(--line);border-radius:3px;box-shadow:0 1px 0 #19302612;transition:transform .16s,box-shadow .16s,border-color .16s}
.bonus-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px #17302530;border-color:#a9b4a6}
.bonus-card.is-selected{border-color:var(--green);box-shadow:0 0 0 2px var(--green),0 12px 26px #17302526}
.bonus-paper{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1/1.12;background:#fff;border:1px solid #e3e1d5;overflow:hidden;margin-bottom:9px}
.bonus-paper img{display:block;max-width:92%;max-height:92%;object-fit:contain;box-shadow:0 1px 4px #19302618}
.bonus-paper img:not([src]){visibility:hidden}
.bonus-card.is-loading .bonus-paper{background:linear-gradient(100deg,#fff 30%,#f1eee3 50%,#fff 70%) 0 0/250% 100%;animation:bonus-shimmer 1.2s linear infinite}
.bonus-tag{position:absolute;top:16px;left:16px;font:700 8px Arial,sans-serif;letter-spacing:1.2px;padding:4px 6px;border-radius:2px;background:var(--gold);color:var(--ink)}
.bonus-tag.is-main{background:var(--red);color:var(--white)}
.bonus-check{position:absolute;top:13px;right:13px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:700 14px/1 Arial,sans-serif;color:transparent;background:#fffdf5e6;border:1.5px solid #9eafa2;transition:background .15s,color .15s,border-color .15s,transform .15s}
.bonus-card.is-selected .bonus-check{background:var(--green);border-color:var(--green);color:var(--white);transform:scale(1.06)}
.bonus-name{font:400 19px/1.1 Impact,'Arial Narrow',Arial,sans-serif;text-transform:uppercase;letter-spacing:.3px}
.bonus-state{font:10px/1.4 'Courier New',monospace;color:var(--muted)}
.bonus-card.is-done .bonus-state{color:var(--green);font-weight:700}
.bonus-foot{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px 34px 18px;border-top:1px solid var(--line);background:#efe9da}
.bonus-status{margin:0!important;font-size:12px!important;line-height:1.5!important;color:var(--muted);flex:1 1 220px}
.bonus-actions{display:flex;gap:10px;flex-wrap:wrap;margin-left:auto}
.bonus-actions .action{width:auto;margin:0;gap:26px}
.bonus-download{background:transparent;color:var(--ink);border:1px solid var(--ink);border-radius:2px;padding:14px 17px;font:700 12px Arial,sans-serif}
.bonus-download:hover{background:var(--ink);color:var(--paper)}
.bonus-actions button:disabled{opacity:.45;cursor:not-allowed}
@keyframes bonus-in{from{opacity:0;transform:translateY(16px) rotate(-1.2deg)}to{opacity:1;transform:none}}
@keyframes bonus-shimmer{to{background-position:-250% 0}}
.bonus-picker[open]:not(.is-return) .bonus-card{animation:bonus-in .44s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * 55ms)}
.quiet-motion .bonus-card,.quiet-motion .bonus-card.is-loading .bonus-paper{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){.bonus-card,.bonus-card.is-loading .bonus-paper{animation:none!important;transition:none!important}}
/* A small gold tab on the corner of a door with bonus pictures. Absolutely placed: the 24 doors keep
   their size and their own text stays free. */
.door-bonus{position:absolute;top:-7px;left:-7px;z-index:2;display:flex;align-items:center;gap:2px;padding:3px 5px 3px 4px;border-radius:9px;background:var(--gold);color:var(--ink);font:700 9px/1 Arial,sans-serif;letter-spacing:.2px;box-shadow:0 1px 3px #12201a59,0 0 0 1px #fffaf04d;pointer-events:none}
.door-bonus span:first-child{font-size:8px}
@media(max-width:800px){.bonus-head{padding:26px 20px 12px}.bonus-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;padding:6px 20px 16px}.bonus-foot{padding:12px 20px 16px}.bonus-name{font-size:16px}.bonus-tag{top:14px;left:14px;font-size:7px}.door-bonus{top:-6px;left:-6px;padding:3px 4px;font-size:8px}}
@media(max-width:420px){.bonus-head h2{font-size:28px}.bonus-actions{width:100%}.bonus-actions button{flex:1;justify-content:center}.bonus-check{width:22px;height:22px;font-size:12px}}
@media(max-height:600px){.bonus-head{padding-top:18px}.bonus-head h2{font-size:26px;margin:6px 0 4px}.bonus-lead{display:none}}
/* Admin: bonus pictures per door. */
.bonus-admin{white-space:normal!important;min-width:240px;vertical-align:top}
.bonus-admin-list{display:flex;flex-wrap:wrap;gap:9px 8px;margin:2px 0 6px}
.bonus-admin-list:empty{display:none}
.bonus-admin-list figure{position:relative;margin:0;width:46px}
.bonus-admin-list img{display:block;width:46px;height:58px;object-fit:contain;background:#fff;border:1px solid var(--line)}
.bonus-admin-list button{position:absolute;top:-7px;right:-7px;width:21px;height:21px;border-radius:50%;border:0;padding:0;background:var(--red);color:#fff;font:700 13px/21px Arial,sans-serif;text-align:center}
.bonus-admin-list figcaption{font:9px 'Courier New',monospace;text-align:center;color:var(--muted);margin-top:2px}
.bonus-admin form{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.bonus-admin .primary{margin:4px 0;padding:9px 12px}
.bonus-admin small{display:block;font-size:10px;color:var(--muted)}
/* Admin table: the optional original photo per door. */
.photo-admin{white-space:normal!important;min-width:200px;vertical-align:top}
.photo-admin-box figure{display:flex;align-items:center;gap:8px;margin:2px 0 6px}
.photo-admin-box figure a{display:block;flex-shrink:0}
.photo-admin-box img{display:block;width:76px;height:57px;object-fit:cover;background:#fff;border:1px solid var(--line)}
.photo-admin-box .photo-remove{border:1px solid var(--red);background:transparent;color:var(--red);font:700 11px Arial,sans-serif;padding:7px 10px;border-radius:2px}
.photo-admin-box .photo-remove:hover{background:var(--red);color:#fff}
.photo-admin form{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.photo-admin .primary{margin:4px 0;padding:9px 12px}
.photo-admin small{display:block;font-size:10px;color:var(--muted)}