.occ-root{--occ-dark:#7a4b2a;--occ-light:#f0d9b5;--occ-red:#d6382d;--occ-black:#2b2b2e;--occ-accent:#b8561f;box-sizing:border-box;max-width:560px;margin:1.5em auto;padding:18px;border-radius:16px;background:#fffaf2;color:#2b2118;font-family:inherit;line-height:1.4;box-shadow:0 6px 22px rgba(0, 0, 0, .14)}.occ-root *, .occ-root *::before, .occ-root *::after{box-sizing:border-box}.occ-root{scroll-margin-top:8px}.occ-root.occ-playing{margin:8px
auto;padding:10px}.occ-playing .occ-bar{padding:4px
10px;margin:3px
0}.occ-playing .occ-board{margin:4px
auto}.occ-playing .occ-status{margin:4px
0}.occ-playing .occ-row{margin:6px
0 0}.occ-playing .occ-btn{padding:7px
14px}.occ-title{margin:0
0 4px;font-size:1.5em;color:#2b2118}.occ-h4{margin:18px
0 8px;font-size:1em;color:#2b2118}.occ-sub,.occ-hint,.occ-empty{margin:0
0 12px;color:#6b5a4a;font-size: .95em}.occ-label{display:block;font-weight:600;margin-bottom:12px}.occ-input{display:block;width:100%;margin-top:4px;padding:10px
12px;border:2px
solid #d9c4a6;border-radius:10px;background:#fff;font-size:1em;color:#2b2118}.occ-input:focus{outline:none;border-color:var(--occ-accent)}.occ-row{display:flex;flex-wrap:wrap;gap:8px;margin:12px
0}.occ-btn{appearance:none;cursor:pointer;padding:10px
16px;border:2px
solid var(--occ-accent);border-radius:10px;background:#fff;color:var(--occ-accent);font-size:1em;font-weight:600;line-height:1.2;transition:transform .08s ease, background .15s ease}.occ-btn:hover{background:#fdeede}.occ-btn:active{transform:translateY(1px)}.occ-primary{background:var(--occ-accent);color:#fff}.occ-primary:hover{background:#9d4817}.occ-small{padding:6px
12px;font-size: .9em}.occ-msg{margin:6px
0;min-height:1.2em;color:#b3261e;font-size: .95em}.occ-list{display:flex;flex-direction:column;gap:6px}.occ-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px
12px;border-radius:10px;background:#fff;border:1px
solid #ecdcc3}.occ-item-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.occ-bar{display:flex;align-items:center;gap:10px;padding:8px
12px;margin:6px
0;border-radius:10px;background:#fff;border:2px
solid transparent}.occ-bar.occ-turn{border-color:var(--occ-accent);background:#fff3e4}.occ-name{flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.occ-count{color:#6b5a4a;font-size: .85em}.occ-disc{width:18px;height:18px;border-radius:50%;flex:none;box-shadow:inset 0 -2px 3px rgba(0, 0, 0, .35)}.occ-disc.occ-r{background:var(--occ-red)}.occ-disc.occ-b{background:var(--occ-black)}.occ-board{display:grid;grid-template-columns:repeat(8, 1fr);width:min(100%, calc(100vh - 230px));width:min(100%, calc(100dvh - 230px));aspect-ratio:1 / 1;margin:8px
auto;border:6px
solid #4a2c17;border-radius:8px;overflow:hidden;user-select:none;-webkit-user-select:none}.occ-sq{position:relative;display:flex;align-items:center;justify-content:center}.occ-sq.l{background:var(--occ-light)}.occ-sq.d{background:var(--occ-dark);cursor:default}.occ-myturn .occ-sq.d{cursor:pointer}.occ-sq.occ-last{box-shadow:inset 0 0 0 3px rgba(255, 221, 87, .7)}.occ-sq.occ-sel{background:#a8692f;box-shadow:inset 0 0 0 3px #ffd43b}.occ-sq.occ-dest::after{content:'';position:absolute;width:28%;height:28%;border-radius:50%;background:rgba(255, 221, 87, .85);box-shadow:0 0 0 3px rgba(255, 255, 255, .25)}.occ-piece{width:78%;height:78%;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:clamp(14px, 5vw, 28px);color:#ffd43b;line-height:1;box-shadow:0 3px 5px rgba(0, 0, 0, .5), inset 0 -4px 6px rgba(0, 0, 0, .3), inset 0 3px 4px rgba(255, 255, 255, .25)}.occ-piece.occ-r{background:radial-gradient(circle at 35% 30%, #f06a5f, var(--occ-red) 60%, #96201a)}.occ-piece.occ-b{background:radial-gradient(circle at 35% 30%, #5a5a60, var(--occ-black) 60%, #111)}.occ-piece.occ-can{outline:3px
solid rgba(255, 221, 87, .8);outline-offset:1px}.occ-piece.occ-king{border:3px
double rgba(255, 215, 80, .85)}.occ-status{margin:8px
0;font-weight:700;font-size:1.05em}.occ-status.occ-over{color:var(--occ-accent);font-size:1.15em}.occ-invite{margin:8px
0}.occ-invite .occ-input{margin-bottom:8px;font-size: .9em}@media (max-width: 420px){.occ-root{padding:12px;border-radius:12px}.occ-board{border-width:4px}}