/* Male cabinet only. The female page retains crane.css. */
:root { color-scheme: dark; color: #f4f4ff; background: #080e1b; }
body { background: radial-gradient(ellipse at 5% 18%, #269dbc15, transparent 48%), radial-gradient(ellipse at 100% 60%, #c18a3c10, transparent 50%); }
.crane-shell { padding: 6px 10px max(20px, env(safe-area-inset-bottom)); }
.machine {
    border-color: transparent; border-radius: 22px;
    background: linear-gradient(#142135, #0d1627) padding-box, linear-gradient(135deg, #fff1c0, #a87d40 24%, #eed19b 48%, #715333 75%, #f5d59d) border-box;
    box-shadow: 0 0 0 1px #3f3328, 0 12px 32px #0008, inset 0 0 0 1px #f9e2b72b;
}
.machine-sign.game-compact-toolbar { position: absolute; top: 7px; right: 17px; z-index: 12; margin: 0 !important; border: 0; background: transparent; pointer-events: none; }
.machine-sign span:last-child { padding: 3px 7px; font-size: 10px; color: #f5dda8; background: #0b1525e6; border: 1px solid #a1804f; border-radius: 6px; font-variant-numeric: tabular-nums; }
.stage {
    margin-top: 0; border-color: #60718a; border-radius: 12px; touch-action: none; user-select: none;
    background: radial-gradient(ellipse at 50% 25%, #2d52604d, transparent 60%), linear-gradient(#0c192b 28%, #1d3047 100%);
    box-shadow: inset 3px 0 0 #4dc7da, inset -3px 0 0 #d4af72, inset 12px 0 20px -12px #4dc7da66, inset -12px 0 20px -12px #d4af7255;
}
.stage::before { background: linear-gradient(90deg, #63cfe0, #fff0c5, #dab273); box-shadow: 0 2px 10px #b6e6f133; }
.stage::after { inset: 90px 5px 0; border-radius: 0; background: repeating-linear-gradient(0deg, transparent 0 52px, #8dbbd41c 53px 54px), radial-gradient(ellipse at 50% 100%, #84c8e51a, transparent 75%); }
.rail { background: linear-gradient(#e0eaf3, #687d94, #b6c4d6); border-color: #53667c; }
.cable { background: linear-gradient(90deg, #61758b, #e0eaf3, #8d9db0); }
.claw-head { border-color: #e8ca87; background: #fff0bc; box-shadow: 0 0 9px #fbd07133; }
.finger { border-color: #ebcc86; }
.stage .plush { filter: drop-shadow(0 3px 4px #050b16a6); }
.plush[data-figure=true] img { inset: 0; width: 100%; height: 100%; object-fit: contain; border: 0; border-radius: 0; background: transparent; }
.plush[data-figure=true]::before { content: 'あたり'; top: -10px; left: 50%; transform: translateX(-50%); width: auto; height: auto; padding: 1px 4px; border: 1px solid #ffe6a0; border-radius: 4px; background: #54391b; box-shadow: none; color: #ffebae; font-size: 8px; font-weight: 800; white-space: nowrap; z-index: 1; }
.plush[data-figure=true]::after { content: none; }
.stage .plush[data-figure=true] { filter: drop-shadow(0 0 4px #ffd16e88); }
.win-token .plush[data-figure=true] { width: 75px; height: 90px; }
.aim-readout { position: absolute; top: 64px; left: 8px; right: 8px; z-index: 12; margin: 0; text-align: center; color: #b9cedf; font-size: 11px; line-height: 20px; pointer-events: none; }
.aim-readout[data-aligned=true] { color: #a8f4ef; font-weight: 800; }
.row-guide { position: absolute; left: 4px; right: 4px; height: 60px; border-block: 1px solid #58e2ed40; background: linear-gradient(90deg, transparent, #4ccee414, transparent); border-radius: 12px; pointer-events: none; }
.prize { transition: filter .12s, opacity .12s; }
.stage .prize[data-active-row=false] { opacity: .65; }
.stage .prize[data-target=true] { z-index: 9; filter: drop-shadow(0 0 7px #65f1ffb0); }
.prize[data-target=true] img { border-color: #a7faff; }
.prize[data-new=true]:not([data-target=true]) img { border-color: #efd185; }
.prize[data-goal=true]::after { content: '◆'; top: -10px; right: -4px; width: 14px; color: #ffe0a0; font-size: 13px; text-shadow: 0 1px 3px #000; }
.aim { width: 45px; height: 18px; border-color: #bccbdb; background: #ffffff0c; }
.aim[data-aligned=true] { border-color: #65f1ee; background: #56e4db2b; box-shadow: 0 0 12px #42ebdf66; }
.aim[data-perfect=true] { border-color: #ffe4a2; background: #fbd47a30; box-shadow: 0 0 15px #ffd16e77; }
.chute { color: #fff0b3; background: linear-gradient(#22344c, #0d1626); border-color: #a1804f; box-shadow: inset 0 3px 8px #0009; }
.controls { padding: 6px 12px 12px; background: linear-gradient(#192940, #0f1b2e); }
.position-control { color: #f3cc75; }
.position-control input { height: 44px; accent-color: #f0c782; }
.depth-buttons { margin: 2px 0 9px; background: #0b1423; border-color: #3a4e68; border-radius: 10px; }
.depth-buttons button { min-height: 44px; color: #b5c6d9; border-radius: 6px; }
.depth-buttons button[aria-pressed=true] { color: #c0fffa; background: linear-gradient(#205062, #16394a); border-color: #5dbebf; box-shadow: inset 0 1px 0 #a2f3ff33; }
.grab { min-height: 53px; color: #fffbed; background: linear-gradient(#ec6880, #c22c56); border: 2px solid #efca8a; border-radius: 12px; text-shadow: 0 1px 1px #7c123c; box-shadow: 0 4px 0 #6e233f, inset 0 2px 0 #ffdbc377; }
.grab:active:not(:disabled) { box-shadow: 0 2px 0 #6e233f; }
.grab[data-aligned=true]:not(:disabled) { border-color: #b5fbff; box-shadow: 0 4px 0 #6e233f, 0 0 12px #41e4ef33, inset 0 2px 0 #ffdbc377; }
.grab[data-perfect=true]:not(:disabled) { border-color: #ffe9b3; box-shadow: 0 4px 0 #6e233f, 0 0 16px #ffd16e55, inset 0 2px 0 #ffdbc377; }
button:focus-visible, input:focus-visible { outline-color: #72efff; }
.result { padding-top: 9px; min-height: 38px; color: #ffe0a1; }
.result-text { color: #d0deec; }
.reward-summary { display: block; margin-top: 3px; font-size: 11px; color: #ffe9a5; line-height: 1.5; }
.reward-summary:empty { display: none; }
.section-heading { flex-wrap: wrap; gap: 3px 8px; }
.section-heading h2 { margin-bottom: 5px; color: #ecdfc3; }
.section-heading>span, .save-note { color: #a5b8cd; }
#totalCount { color: #efd185; font-variant-numeric: tabular-nums; }
.collection-goal { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 8px; align-items: center; width: 100%; min-height: 70px; padding: 11px 12px; margin: 3px 0 10px; text-align: left; color: #f7e7c3; border: 1px solid #9a7c4c; border-radius: 12px; background: linear-gradient(110deg, #25334a, #162236); box-shadow: inset 0 1px 0 #ead7b019; }
.collection-goal strong { display: block; font-size: 12px; line-height: 1.5; }
.collection-goal small { display: block; margin-top: 3px; color: #bfcfdf; font-size: 10px; line-height: 1.5; }
#goalAction { font-size: 11px; white-space: nowrap; color: #ffe2a0; }
.collection-goal:disabled { cursor: default; opacity: 1; }
.collection-goal:disabled #goalAction { opacity: .6; }
.collection-goal progress { grid-column: 1 / -1; appearance: none; width: 100%; height: 5px; border: 0; border-radius: 5px; overflow: hidden; background: #091422; color: #eac482; }
.collection-goal progress::-webkit-progress-bar { background: #091422; }
.collection-goal progress::-webkit-progress-value { background: linear-gradient(90deg, #9b7c4b, #f9dfa4); border-radius: 5px; }
.collection-goal progress::-moz-progress-bar { background: #eac482; border-radius: 5px; }
.shelf { border-color: #496079; border-bottom-color: #c09c63; background: radial-gradient(ellipse at 50% 10%, #d4b77e19, transparent 65%), linear-gradient(#152337, #253a52 88%, #e9c78f 89%, #8c704a 94%, #4d3e2d 100%); box-shadow: inset 0 1px 0 #b6c6dc22, 0 5px 16px #0004; }
.empty-slot { color: #70869d; opacity: .7; }
button.shelf-slot { border: 0; background: transparent; color: inherit; border-radius: 12px; }
button.shelf-slot:active .plush { transform: translateY(-4px); }
.catalog { gap: 5px; margin-top: 10px; }
.catalog button { padding: 14px 1px 8px; background: linear-gradient(#23334b, #142236); border-color: #415772; border-radius: 11px; color: #e9f0f8; }
.catalog button[aria-pressed=true] { background: linear-gradient(#344354, #1d2e42); border-color: #efcf8c; box-shadow: inset 0 0 0 1px #efcf8c33; }
.catalog button:disabled { cursor: default; opacity: 1; background: #101c2e; border-color: #293b54; color: #91a5bc; }
.catalog button:disabled .plush { opacity: .4; }
.catalog .cast-name { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 9px; white-space: nowrap; }
.catalog .count { color: #e2c48d; font-size: 10px; font-variant-numeric: tabular-nums; }
.catalog button[data-rank=bronze]::after, .catalog button[data-rank=silver]::after, .catalog button[data-rank=gold]::after { position: absolute; top: 1px; right: 4px; font-size: 9px; letter-spacing: -1px; text-shadow: 0 1px 2px #000; }
.catalog button[data-rank=bronze]::after { content: '★'; color: #d8a174; }
.catalog button[data-rank=silver]::after { content: '★★'; color: #c9e2ef; }
.catalog button[data-rank=gold]::after { content: '★★★'; color: #ffe09a; }
.is-winning { box-shadow: 0 0 0 2px #fff1b3, 0 0 26px #ffca5677, 0 0 45px #41d1d92b; }
.win-token { position: relative; background: radial-gradient(circle, #fff8dff0 45%, #ffe59b66 66%, transparent 73%); box-shadow: 0 0 35px #ffcb6077; }
.win-token::before, .win-token::after { color: #fff0a1; text-shadow: 0 0 9px #ffb700; }
.win-label { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); padding: 4px 12px; border: 1px solid #ffe8aa; border-radius: 6px; background: #102036; color: #ffe4a2; font-size: 16px; font-weight: 900; letter-spacing: .06em; }
.celebration-particle { color: #ffe493; filter: drop-shadow(0 0 5px #ffb05266); }
@media (prefers-reduced-motion: reduce) { .prize { transition: none; } }

/* Keep the last catch identifiable without adding space above the glass. */
.result-plush:empty { display: none; }
.result[data-outcome] { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 3px 8px; text-align: left; align-items: center; }
.result[data-outcome] .result-plush { grid-column: 1; grid-row: 1 / 4; align-self: start; }
.result-plush .plush { width: 46px; height: 56px; }
.result[data-outcome] > strong, .result[data-outcome] > .reward-summary, .result[data-outcome] > .result-text { grid-column: 2; min-width: 0; overflow-wrap: anywhere; margin: 0; }
.result[data-outcome] > .game-ranking-open { grid-column: 1 / -1; }
.collection-album { margin-top: 10px; border: 1px solid #415772; border-radius: 12px; background: #101c2e; }
.collection-album summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px; cursor: pointer; font-size: 12px; color: #ecdfc3; }
.collection-album summary::after { content: '＋'; color: #efd185; }
.collection-album[open] summary::after { content: '−'; }
.catalog-progress { margin-left: auto; font-size: 11px; font-variant-numeric: tabular-nums; }
.catalog-filters { display: flex; gap: 4px; padding: 0 8px; }
.catalog-filters button { flex: 1; min-width: 0; min-height: 44px; padding: 6px 2px; border: 1px solid #415772; border-radius: 8px; color: #bfcfdf; background: #192940; font-size: 11px; }
.catalog-filters button[aria-pressed=true] { color: #ffe2a0; border-color: #c09c63; background: #2a3a4e; }
.catalog-tip, .catalog-empty { margin: 8px 10px; color: #a5b8cd; font-size: 11px; line-height: 1.5; }
.collection-album .catalog { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0 8px 8px; }
.catalog button[hidden] { display: none; }
.catalog .cast-name { white-space: normal; overflow-wrap: anywhere; min-height: 2.7em; line-height: 1.35; font-size: 10px; }
@media (max-width: 350px) { .collection-album .catalog { grid-template-columns: repeat(3, minmax(0, 1fr)); } }