#rps{--rock:#3d3b38;--scissors:#86827b;--paper:#cfc8bb}#rps button{font:inherit;color:var(--ink);background:#fff;border:1px solid var(--line-2);border-radius:24px;padding:6px 13px;cursor:pointer}#rps button:focus-visible,#rps canvas:focus-visible{outline:3px solid var(--blue);outline-offset:2px}#rps .content{min-width:0}#rps .lead{margin-bottom:12px}#rps .board{aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:#0a0a0b;position:relative}#rps canvas{width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}#rps .teams{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:12px}#rps .teams button{display:flex;align-items:center;justify-content:space-between;gap:4px;border-radius:12px;padding:7px 9px;border-bottom:3px solid var(--team);font-size:13px;white-space:nowrap}#rps .teams button:nth-child(1){--team:var(--rock)}#rps .teams button:nth-child(2){--team:var(--scissors)}#rps .teams button:nth-child(3){--team:var(--paper)}#rps .teams button[aria-pressed=true]{background:color-mix(in srgb,var(--team) 21%,white);border-color:var(--team);box-shadow:inset 0 0 0 1px var(--team)}#rps output{font-variant-numeric:tabular-nums;font-size:12px}#rps .territory{display:flex;height:5px;overflow:hidden;margin:10px 0 14px;border-radius:2px}#rps .territory i:nth-child(1){background:var(--rock)}#rps .territory i:nth-child(2){background:var(--scissors)}#rps .territory i:nth-child(3){background:var(--paper)}#rps .controls{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12px}#rps .controls button{min-height:38px;padding:5px 11px}#rps #generation{margin-left:auto;color:var(--ink-3);font-variant-numeric:tabular-nums}#rps #status{color:var(--ink-2);font-size:13px;min-height:44px;padding-top:10px}#rps details{font-size:13px;margin-top:7px;color:var(--ink-2)}#rps summary{cursor:pointer;width:fit-content;padding:5px 0}#rps details p{margin-top:10px}#rps .rule-cycle{font-size:14px;color:var(--ink)}#rps .source{font-size:12px}#rps .source a{text-decoration:underline}#rps .inspector{display:flex;align-items:center;gap:18px;margin-top:12px;padding:12px;background:#f6f5f3;border-radius:12px}#rps .cross{flex:none;width:96px;height:96px;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);gap:2px}#rps .cross span{display:grid;place-items:center;border-radius:4px;font-size:20px}#rps .cross span:nth-child(1){grid-area:1/2}#rps .cross span:nth-child(2){grid-area:2/3}#rps .cross span:nth-child(3){grid-area:3/2}#rps .cross span:nth-child(4){grid-area:2/1}#rps .cross span:nth-child(5){grid-area:2/2;outline:2px solid var(--ink);outline-offset:1px}#rps .inspector p{margin:0}#rps footer{padding:24px 20px 40px 72px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-3)}
#rps .controls{position:static;max-width:100%;justify-content:flex-start;margin:0}
@media(max-width:480px){#rps h1{font-size:24px}#rps .avatar{width:32px;height:32px}#rps .avatar svg{width:25px;height:25px}#rps .teams{gap:5px}#rps .teams button{flex-direction:column;gap:0;padding:5px 3px}#rps .controls{gap:6px}#rps .controls button{min-height:44px;padding:5px 9px}#rps #generation{width:100%;margin:0}#rps .lead{font-size:14px}#rps footer{padding-left:52px}#rps .inspector{gap:10px;padding:9px}#rps .rule-cycle{font-size:12px}}