:root {
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
    color: #2a2328;
    background: #fdf6f8;
    color-scheme: light;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, input { font: inherit; }
button {
    min-height: 44px;
    border: 0;
    border-radius: 8px;
    color: #2a2328;
    background: #f3f4f6;
    font-weight: 700;
    cursor: pointer;
}
button:focus-visible, input:focus-visible, summary:focus-visible {
    outline: 3px solid #b76c8a;
    outline-offset: 2px;
}
.medal-shell {
    max-width: 450px;
    margin: auto;
    background: #fff;
    padding: 0 6px max(16px, env(safe-area-inset-bottom));
}
.cabinet { position: relative; }
.board {
    display: block;
    width: 100%;
    height: calc(100svh - 174px - env(safe-area-inset-bottom));
    height: calc(100dvh - 174px - env(safe-area-inset-bottom));
    min-height: 290px;
    max-height: 740px;
    touch-action: none;
    border-radius: 8px;
    background: #19283a;
}
.controls { display: flex; gap: 8px; padding: 8px 2px; }
.controls input { width: 0; min-width: 0; flex: 1; accent-color: #9c7549; min-height: 48px; margin: 0; }
.controls button { min-width: 84px; min-height: 48px; touch-action: none; }
#drop { background: #f0dbac; color: #553e28; font-size: 16px; }
#drop:active { background: #d8b574; }
#drop:disabled { opacity: .55; }
#nudge { font-size: 12px; background: #eef0f3; }
#nudge:disabled { color: #6e626a; background: #f3f4f6; cursor: default; }
#nudge:not(:disabled) { background: #f0dbac; color: #553e28; outline: 2px solid #c3a266; outline-offset: -2px; }
.collection { padding: 0 6px; }
.collection summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
    cursor: pointer;
}
.collection summary::after { content: '+'; font-size: 18px; font-weight: 400; }
.collection[open] summary::after { content: '−'; }
#progress { margin-left: auto; font-variant-numeric: tabular-nums; }
.album { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.album figure { margin: 0; text-align: center; font-size: 10px; overflow-wrap: anywhere; }
.album img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: #f3f4f6; border-radius: 8px; }
.album .missing img { opacity: .35; filter: grayscale(1); }
.album figcaption span { display: block; font-size: 11px; margin-top: 3px; }
.help { font-size: 12px; color: #6e626a; line-height: 1.8; }
.save-note { font-size: 11px; color: #6e626a; margin: 4px 0; }
.refill, .new-table { width: 100%; margin-bottom: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[hidden] { display: none !important; }
@media (max-width: 450px) { :root { background: #fff; } }