/* Milk and coral: a soft match table, with celebrations reserved for a win. */
body[data-game='rps'] {--accent:#b55260; --mini-bg:#fbe6df; --ink:#60454b; --paper:#fffcf7; background:#f8eee7}
body[data-game='rps'] .mini-shell {gap:3px; padding-top:2px; background:linear-gradient(#fffcf7,#fcf1e9)}
body[data-game='rps'] .companion {gap:5px}
body[data-game='rps'] .companion::before {background:#f8ddd2; box-shadow:inset 0 0 0 3px #fff8}
body[data-game='rps'] .speech {background:#fffefb; border-color:#e9cec4; border-radius:6px 18px 18px; color:#60454b; box-shadow:0 3px 0 #c78b7610}
body[data-game='rps'] .companion[data-reaction='good'] .speech {background:#ffebe4; border-color:#d58683}
body[data-game='rps'] .mini-hud > span:first-child {background:#f7e2dc; color:#a94f58; border-radius:20px}
body[data-game='rps'] .mini-hud .clock {border-color:#ebd5cc; border-radius:20px; color:#725357}
body[data-game='rps'] .stage {border-radius:25px; border:1px solid #e3c2b4; box-shadow:0 2px 0 #fff inset,0 5px 12px #a76c5010; min-height:210px}
body[data-game='rps'] .controls {gap:6px; padding:2px 2px 3px}
body[data-game='rps'] .controls button {max-width:112px; min-height:56px; flex-direction:column; gap:1px; padding:4px; color:#74434c; border:1px solid #dbb5a9; border-bottom:4px solid #d8a99d; border-radius:20px; background:linear-gradient(#fffefb,#fff1e8); box-shadow:inset 0 1px 0 #fff,0 3px 7px #9760520c}
body[data-game='rps'] .controls button > img {width:30px; height:30px}
body[data-game='rps'] .controls button:nth-child(2) > img {content:url('./scissors.svg?v=1')}
body[data-game='rps'] .controls button:active {background:#ffe4dc; border-bottom-width:2px}
body[data-game='rps'] .controls button:disabled {opacity:.55; background:#f5e9e3; box-shadow:none}
body[data-game='rps'] .overlay {background:linear-gradient(150deg,#fffdf7f7,#fff6efef 60%,#fbe2d8f5)}
body[data-game='rps'] .panel-icon {border-radius:50%; background:#ffe7dc; border:3px solid #fff; box-shadow:0 5px 0 #e8b9a63b}
body[data-game='rps'] .cast-options {gap:9px}
body[data-game='rps'] .cast-options button {border-radius:20px; background:#f2e5dc}
body[data-game='rps'] .cast-options button[aria-pressed='true'] {background:#ffe1d4; border-color:#b55260; box-shadow:0 4px 0 #b5526029,0 0 0 3px #fff}
body[data-game='rps'] .go {background:linear-gradient(155deg,#d77a7b,#be5a64); box-shadow:0 4px 0 #a84c57,0 7px 12px #bd62632b}
body[data-game='rps'] .overlay[data-presentation='result'] {border-color:#e4bdb2; background:#fffaf5}
body[data-game='rps'] .overlay[data-presentation='result'] h2 {color:#aa515a}
@media (max-width:350px) {
    body[data-game='rps'] .controls {gap:7px; padding-inline:3px}
    body[data-game='rps'] .cast-options {gap:5px}
    body[data-game='rps'] .cast-options button {width:48px}
}
@media (max-height:670px) {
    body[data-game='rps'] .controls button {min-height:52px; gap:0; border-radius:16px}
    body[data-game='rps'] .controls button > img {width:28px;height:28px}
    body[data-game='rps'] .controls {padding-top:2px}
}
@media (prefers-reduced-motion:reduce) {
    body[data-game='rps'] *,body[data-game='rps'] *::before,body[data-game='rps'] *::after {animation:none!important;transition:none!important}
}

/* Score order matches the two named sides of the board. */
body[data-game='rps'] .mini-hud small {font-size:10px; font-weight:650; color:#794950}
body[data-game='rps'] .mini-hud strong {letter-spacing:.05em; font-size:18px}

/* Three equal touch cards; the revealed choice stays legible while input rests. */
body[data-game='rps'] .hand-name {font-size:11px; line-height:1.2; font-weight:700; pointer-events:none}
body[data-game='rps'] .controls button[aria-pressed='true'] {border:2px solid #b55260; border-bottom:4px solid #a44755; background:#ffe2d6; box-shadow:inset 0 0 0 2px #fff9}
body[data-game='rps'] .controls button[aria-pressed='true']:disabled {opacity:1; color:#74434c}
body[data-game='rps'] .controls[data-phase='reveal'] button:not([aria-pressed='true']) {opacity:.65}
body[data-game='rps'] .controls button:focus-visible {outline:3px solid #793b48; outline-offset:2px}

/* Short, explicit calls to action and a calm result ribbon beside the board. */
body[data-game='rps'] .go {width:auto; min-width:116px; height:52px; padding:0 20px; font-size:15px; font-weight:750; border-radius:22px}
body[data-game='rps'] .panel-icon img {content:url('./scissors.svg?v=1')}
body[data-game='rps'] .overlay h2 {color:#75434e; letter-spacing:.01em}
body[data-game='rps'] .panel-detail {color:#755b5e}
body[data-game='rps'] .overlay[data-presentation='result'] {border-radius:18px; border-left:4px solid #ba8c78; background:linear-gradient(110deg,#fffdf7,#fff0e6)}
body[data-game='rps'] .overlay[data-presentation='result'][data-outcome='win'] {border-left-color:#b55260; background:linear-gradient(110deg,#fffdf7,#ffe5db)}
body[data-game='rps'] .overlay[data-presentation='result'][data-outcome='draw'] {border-left-color:#73927e; background:#f5f9f2}
body[data-game='rps'] .overlay[data-presentation='result'] .go {width:auto; min-width:76px; height:44px; padding:0 12px; font-size:12px; border-radius:15px}
body[data-game='rps'] .overlay[data-presentation='result'] .panel-detail {font-size:12px; color:#794950}
body[data-game='rps'] .companion[data-reaction='draw'] .speech {background:#f2f7ef; border-color:#afc3ad}
@media (max-height:620px) {body[data-game='rps'] .go {height:44px}}

/* Keep essential touch targets generous without adding a separate heading. */
body[data-game='rps'] .mini-hud .icon-button {width:44px; min-height:44px}
body[data-game='rps'] .mini-hud {min-height:32px}
body[data-game='rps'] .cast-name {color:#75565c}
body[data-game='rps'] .cast-toggle {color:#86434f; background:#ffede4; border-color:#dcb8a9}
body[data-game='rps'] .overlay {backdrop-filter:none}

/* A brief, board-local shower only after an overall victory. */
body[data-game='rps'] .victory-shower {position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; border-radius:inherit}
body[data-game='rps'] .victory-shower i {position:absolute; left:var(--x); top:8%; width:8px; height:8px; background:#c9697d; opacity:0; transform:rotate(45deg)}
body[data-game='rps'] .victory-shower i::before,body[data-game='rps'] .victory-shower i::after {content:''; position:absolute; width:8px; height:8px; border-radius:50%; background:inherit}
body[data-game='rps'] .victory-shower i::before {left:-4px}
body[data-game='rps'] .victory-shower i::after {top:-4px}
body[data-game='rps'] .stage[data-celebration='win'] .victory-shower i {animation:rps-heart-shower 1000ms ease-out calc(var(--i) * 25ms) both}
@keyframes rps-heart-shower {
    0% {opacity:0; transform:translateY(0) rotate(35deg)}
    18% {opacity:.8}
    100% {opacity:0; transform:translateY(180px) rotate(65deg)}
}

/* One finite group owns completion; particles never accumulate or restart on repaint. */
body[data-game='rps'] .stage[data-celebration='win'] .victory-shower {animation:rps-shower-lifetime 1300ms linear}
@keyframes rps-shower-lifetime {from {visibility:visible} to {visibility:visible}}

@media (prefers-reduced-motion:reduce) {
    body[data-game='rps'] .victory-shower {display:none}
}

/* Progress shares the compact companion row; wins stay beside each hand. */
body[data-game='rps'] .companion > .mini-hud {position:static; flex:none; min-height:44px; gap:3px; padding:0}
body[data-game='rps'] .mini-hud .clock {min-width:32px; margin:0; padding:5px 3px; font-size:11px}
body[data-game='rps'] .rps-accessible {position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0}
body[data-game='rps'] .result-record {margin:0; font-size:11px; line-height:1.5; color:#755b5e; overflow-wrap:anywhere}
body[data-game='rps'] .overlay[data-presentation='result'] .panel-detail {order:3; flex-basis:100%; max-width:none; margin:0}
body[data-game='rps'] .overlay[data-presentation='result'] .result-record {order:4; flex-basis:100%}
body[data-game='rps'] .overlay[data-presentation='result'] .cast-options {order:5}
body[data-game='rps'] .overlay[data-presentation='result'] .save-note {order:6}

/* Fixed-size information stays readable even when the canvas shrinks to 210px high. */
body[data-game='rps'] .rps-side-score,body[data-game='rps'] .rps-round-message {position:absolute; z-index:3; pointer-events:none; font-weight:650; text-align:center; color:#60454b}
body[data-game='rps'] .rps-side-score {right:2.8%; max-width:calc(50% - 12px); padding:4px 8px; border-radius:13px; font-size:13px; line-height:18px; background:#f7e9df}
body[data-game='rps'] .rps-opponent-score {top:7.5%}
body[data-game='rps'] .rps-player-score {top:63%; background:#f9e1da}
body[data-game='rps'] .rps-round-message {top:55%; left:50%; transform:translate(-50%,-50%); width:max-content; max-width:calc(100% - 32px); padding:5px 10px; border:1px solid #dfcec2; border-radius:17px; background:#fffdf9; font-size:14px; line-height:18px}
body[data-game='rps'] .rps-round-message[data-outcome='win'] {color:#fff; background:#b55260; border-color:#b55260}
body[data-game='rps'] .rps-round-message[data-outcome='draw'] {background:#e4eee6}