#ub-cat-reversi,#ub-cat-reversi *{box-sizing:border-box}
#ub-cat-reversi{--line:#e7dfd8;--rv-panel-width:min(100%,clamp(280px,70%,365px));max-width:660px;margin:0 auto;color:#51463f;font:13px/1.5 -apple-system,BlinkMacSystemFont,"Hiragino Sans",Meiryo,sans-serif;-webkit-text-size-adjust:100%}
#ub-cat-reversi button{font:inherit;touch-action:manipulation;cursor:pointer;-webkit-tap-highlight-color:transparent}
#ub-cat-reversi button:focus-visible{outline:3px solid #baa1bd;outline-offset:2px}
#ub-cat-reversi .rv-shell{padding:16px;border:1px solid var(--line);border-radius:20px;background:#fff}
#ub-cat-reversi .rv-heading{text-align:center;font-weight:750;font-size:17px;margin:0 0 14px}
#ub-cat-reversi .rv-controls{display:flex;align-items:center;flex-wrap:wrap;gap:9px;justify-content:center;margin-bottom:8px}
#ub-cat-reversi .rv-label{font-size:12px;font-weight:750;color:#777}
#ub-cat-reversi .rv-segment{display:flex;gap:3px;padding:3px;border:1px solid #ded8d4;border-radius:11px;background:#f5f3f1}
#ub-cat-reversi .rv-segment button{padding:8px 12px;background:transparent;border:0;border-radius:8px;font-size:12px;font-weight:750;color:#756b65}
#ub-cat-reversi .rv-segment button[aria-pressed=true]{background:#858585;color:#fff}
#ub-cat-reversi .rv-new{margin-right:15px;padding:8px 12px;min-height:39px;border:1px solid #ada7a2;border-radius:11px;background:#fff;color:#635c57;font-weight:750}
#ub-cat-reversi .rv-assignment{margin:0 auto 9px;text-align:center;color:#76685e;font-size:12px;font-weight:750}
#ub-cat-reversi .rv-assignment[hidden]{display:none!important}
#ub-cat-reversi .rv-turnbar{display:flex;justify-content:center;align-items:center;width:var(--rv-panel-width);max-width:100%;min-height:76px;padding:6px 0;margin:0 auto 7px;border:1px solid #eee5dc;border-radius:13px;background:#fffbf7}
#ub-cat-reversi .rv-turnbar img{display:block;width:56px;height:56px;object-fit:contain}
#ub-cat-reversi .rv-wood{position:relative;width:var(--rv-panel-width);max-width:100%;margin:0 auto;padding:10px;border:5px solid #6d4a32;border-radius:18px;background:linear-gradient(120deg,#cda581,#93694b 51%,#b98e68);box-shadow:0 5px 15px #4c321d20}
#ub-cat-reversi .rv-board{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));gap:2px;padding:3px;border:5px solid #735039;border-radius:9px;aspect-ratio:1/1;background:#74533d}
#ub-cat-reversi .rv-cell{position:relative;display:grid;place-items:center;min-width:0;min-height:0;width:100%;height:100%;border:0;padding:0;background:#cba682;overflow:hidden}
#ub-cat-reversi .rv-cell:nth-child(16n+2),#ub-cat-reversi .rv-cell:nth-child(16n+4),#ub-cat-reversi .rv-cell:nth-child(16n+6),#ub-cat-reversi .rv-cell:nth-child(16n+8),#ub-cat-reversi .rv-cell:nth-child(16n+9),#ub-cat-reversi .rv-cell:nth-child(16n+11),#ub-cat-reversi .rv-cell:nth-child(16n+13),#ub-cat-reversi .rv-cell:nth-child(16n+15){background:#b68c6b}
#ub-cat-reversi .rv-cell.legal:after{content:"";position:absolute;width:23%;aspect-ratio:1;border-radius:50%;background:#74503999}
#ub-cat-reversi .rv-cell.last{box-shadow:inset 0 0 0 2px #fff2b7}
#ub-cat-reversi .rv-piece{width:96%;height:96%;display:block;object-fit:contain;image-rendering:auto;pointer-events:none;user-select:none;filter:drop-shadow(0 1px 1px #38281e3a)}
#ub-cat-reversi .rv-cell.flipped .rv-piece{animation:rv8flip .42s ease-out}
@keyframes rv8flip{0%{transform:perspective(150px) rotateY(90deg) scale(.8)}50%{transform:scale(1.13)}100%{transform:none}}
#ub-cat-reversi .rv-scores{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:10px auto 0;width:var(--rv-panel-width);max-width:100%;justify-items:stretch}
#ub-cat-reversi .rv-score{display:flex!important;justify-content:center!important;align-items:center!important;text-align:center!important;min-width:0;gap:7px;padding:8px 4px;min-height:67px;border:1px solid #e6dfd9;border-radius:12px;background:#fff}
#ub-cat-reversi .rv-score.active{background:#fffbf7;border-color:#cba98d}
#ub-cat-reversi .rv-score img{display:block!important;float:none!important;clear:none!important;margin:0!important;padding:0!important;position:static!important;align-self:center!important;object-fit:contain;object-position:center center;width:37px;height:37px;flex:0 0 37px;max-width:37px;max-height:37px}
#ub-cat-reversi .rv-score .name{font-size:12px;font-weight:750;white-space:nowrap}
#ub-cat-reversi .rv-score .num{font-size:27px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1;color:#453d39!important;-webkit-text-fill-color:#453d39!important}
#ub-cat-reversi .rv-score .unit{font-size:11px;color:#8c8078}
#ub-cat-reversi .rv-soundrow{display:flex;justify-content:center;align-items:center;margin:14px 0 2px}
#ub-cat-reversi .rv-sound{display:inline-flex;gap:9px;align-items:center;justify-content:center;border:1px solid #e2dcd7;border-radius:13px;background:#fff;padding:7px 12px;color:#716a65;font-size:12px;font-weight:750}
#ub-cat-reversi .rv-pill{display:grid;place-items:center;width:44px;height:24px;border-radius:16px;background:#efebea;color:#827a76;font-size:11px}
#ub-cat-reversi .rv-sound[aria-pressed=true] .rv-pill{background:#888;color:white}
#ub-cat-reversi .rv-notice{text-align:center;color:#87746b;font-size:12px;min-height:20px;margin:8px 0 0}
#ub-cat-reversi .rv-overlay{position:absolute;inset:0;z-index:4;display:grid;place-items:center;padding:12px;background:#fffbf4c4;backdrop-filter:blur(1.5px)}
#ub-cat-reversi .rv-overlay[hidden]{display:none!important}
#ub-cat-reversi .rv-result{width:min(100%,370px);padding:14px 12px;border-radius:15px;border:1px solid #e6dcd5;background:#fffdfb;box-shadow:0 12px 30px #4c342126;text-align:center}
#ub-cat-reversi .rv-result .rv-winner{font-size:19px;margin:0 0 12px}
#ub-cat-reversi .rv-result .rv-scores{margin:0;width:100%;max-width:100%;gap:7px}
#ub-cat-reversi .rv-result .rv-score{gap:5px;min-height:64px}
#ub-cat-reversi .rv-reason{font-size:11px;color:#8c776a;margin:11px 0 0}
#ub-cat-reversi button:disabled{cursor:default}
@media(max-width:600px){#ub-cat-reversi .rv-shell{padding:11px;border-radius:16px}#ub-cat-reversi .rv-controls{gap:7px}#ub-cat-reversi .rv-new{margin-right:10px}#ub-cat-reversi .rv-wood{border-width:5px;padding:6px}#ub-cat-reversi .rv-board{gap:1px;padding:3px}#ub-cat-reversi .rv-scores{gap:8px;margin-top:9px}#ub-cat-reversi .rv-score{gap:5px;min-height:57px;padding:6px 3px}#ub-cat-reversi .rv-score img{width:29px;height:29px;flex-basis:29px;max-width:29px;max-height:29px}#ub-cat-reversi .rv-score .num{font-size:22px}#ub-cat-reversi .rv-assignment{margin:0 auto 9px;text-align:center;color:#76685e;font-size:12px;font-weight:750}
#ub-cat-reversi .rv-assignment[hidden]{display:none!important}
#ub-cat-reversi .rv-turnbar{min-height:65px;margin-bottom:6px}#ub-cat-reversi .rv-turnbar img{width:50px;height:50px}#ub-cat-reversi .rv-result{padding:10px 7px}#ub-cat-reversi .rv-result .rv-winner{font-size:16px}}
@media(max-width:365px){#ub-cat-reversi .rv-result .rv-score{gap:3px;padding:6px 1px}#ub-cat-reversi .rv-result .rv-score img{width:23px;height:23px;flex-basis:23px;max-width:23px;max-height:23px}#ub-cat-reversi .rv-result .rv-score .num{font-size:20px}#ub-cat-reversi .rv-segment button{padding:7px 8px;font-size:11px}#ub-cat-reversi .rv-new{margin-right:8px;padding:7px 8px;font-size:11px}#ub-cat-reversi .rv-score .name{font-size:11px}#ub-cat-reversi .rv-score img{width:26px;height:26px;flex-basis:26px;max-width:26px;max-height:26px}}
@media(prefers-reduced-motion:reduce){#ub-cat-reversi .rv-cell.flipped .rv-piece{animation:none}}

#ub-cat-reversi .rv-score .name{color:#69605c!important;-webkit-text-fill-color:#69605c!important}

@media (min-width:601px) and (max-height:690px){#ub-cat-reversi{--rv-panel-width:min(100%,clamp(280px,70%,clamp(320px,calc(100dvh - 320px),365px)))}}

@media(max-width:600px){
#ub-cat-reversi .rv-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:var(--rv-panel-width);max-width:100%;margin:0 auto 8px;gap:7px 8px;align-items:center;justify-items:stretch}
#ub-cat-reversi .rv-controls>.rv-new{grid-column:1;grid-row:1;width:100%;min-width:0;margin:0;text-align:center}
#ub-cat-reversi .rv-controls>.rv-label{grid-column:2;grid-row:1;text-align:center;justify-self:stretch;margin:0}
#ub-cat-reversi .rv-controls>.rv-segment{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;min-width:0}
#ub-cat-reversi .rv-controls>.rv-segment button{width:100%;min-width:0;margin:0;text-align:center}
}