.occh-root{--occh-sq:44px;--occh-light:#f0d9b5;--occh-dark:#b58863;--occh-accent:#8a5a2b;box-sizing:border-box;max-width:720px;margin:10px
auto;padding:12px;border-radius:14px;background:#fffaf2;color:#2b2118;font-family:inherit;line-height:1.35;box-shadow:0 6px 22px rgba(0, 0, 0, .14);-webkit-tap-highlight-color:transparent}.occh-root *, .occh-root *::before, .occh-root *::after{box-sizing:border-box}html.occh-noscroll, html.occh-noscroll
body{overflow:hidden !important}.occh-root.occh-full{position:fixed;inset:0;z-index:999999;margin:0;max-width:none !important;width:100%;height:100vh;height:100dvh;border-radius:0;overflow:auto;display:flex;align-items:center;justify-content:center;padding:max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left))}.occh-title{margin:0
0 4px;font-size:1.5em;color:#2b2118}.occh-h4{margin:16px
0 8px;font-size:1em;color:#2b2118}.occh-sub,.occh-empty{margin:0
0 12px;color:#6b5a4a;font-size: .95em}.occh-label{display:block;font-weight:600;margin-bottom:10px}.occh-input{display:block;width:100%;margin-top:4px;padding:10px
12px;border:2px
solid #d9c4a6;border-radius:10px;background:#fff;font-size:16px;color:#2b2118}.occh-input:focus{outline:none;border-color:var(--occh-accent)}.occh-row{display:flex;flex-wrap:wrap;gap:8px;margin:12px
0}.occh-btn{appearance:none;cursor:pointer;padding:10px
16px;border:2px
solid var(--occh-accent);border-radius:10px;background:#fff;color:var(--occh-accent);font-size:1em;font-weight:600;line-height:1.2;transition:transform .08s ease, background .15s ease;touch-action:manipulation}.occh-btn:hover{background:#fbeedc}.occh-btn:active{transform:translateY(1px)}.occh-primary{background:var(--occh-accent);color:#fff}.occh-primary:hover{background:#6f4620}.occh-small{padding:6px
12px;font-size: .9em}.occh-disabled{opacity: .6;cursor:default;pointer-events:none}.occh-msg{margin:4px
0;min-height:1.2em;color:#b3261e;font-size: .92em}.occh-list{display:flex;flex-direction:column;gap:6px}.occh-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px
12px;border-radius:10px;background:#fff;border:1px
solid #ecdcc3}.occh-item-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.occh-col{margin:0
auto;width:100%;max-width:100%}.occh-bar{display:flex;align-items:center;gap:8px;padding:4px
8px;margin:3px
0;border-radius:8px;background:#fff;border:2px
solid transparent;min-height:34px}.occh-bar.occh-turn{border-color:var(--occh-accent);background:#fff3e4}.occh-name{flex:0 1 auto;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.occh-cap{flex:1;text-align:right;white-space:nowrap;overflow:hidden}.occh-disc{width:14px;height:14px;border-radius:50%;flex:none;border:2px
solid #333}.occh-disc.occh-dw{background:#fff}.occh-disc.occh-db{background:#222}.occh-boardwrap{position:relative;width:min(100%, 60vh);aspect-ratio:1 / 1;margin:4px
auto}.occh-board{display:grid;grid-template-columns:repeat(8, 1fr);grid-template-rows:repeat(8, 1fr);width:100%;height:100%;border:3px
solid #4a2c17;border-radius:6px;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:manipulation}.occh-sq{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0}.occh-sq.l{background:var(--occh-light)}.occh-sq.d{background:var(--occh-dark)}.occh-myturn .occh-sq{cursor:pointer}.occh-sq::before{content:'';position:absolute;inset:0;pointer-events:none}.occh-sq.occh-last::before{background:rgba(255, 226, 60, .5)}.occh-sq.occh-sel::before{background:rgba(30, 130, 50, .55)}.occh-sq.occh-check::before{background:radial-gradient(circle, rgba(230, 0, 0, .9) 0%, rgba(230, 0, 0, .5) 45%, rgba(230, 0, 0, 0) 78%)}.occh-sq.occh-dest::after{content:'';position:absolute;width:30%;height:30%;border-radius:50%;background:rgba(20, 90, 30, .45);pointer-events:none;z-index:3}.occh-sq.occh-cap-dest::after{content:'';position:absolute;inset:4%;border-radius:50%;border:calc(var(--occh-sq) * .09) solid rgba(20, 90, 30, .5);pointer-events:none;z-index:3}.occh-coord{position:absolute;font-size:calc(var(--occh-sq) * .2);font-weight:700;line-height:1;opacity: .75;pointer-events:none;z-index:1}.occh-rank{top:3%;left:5%}.occh-file{bottom:3%;right:5%}.occh-sq.l .occh-coord{color:var(--occh-dark)}.occh-sq.d .occh-coord{color:var(--occh-light)}.occh-g{font-family:"Segoe UI Symbol","Noto Sans Symbols 2","Noto Sans Symbols","Apple Symbols","DejaVu Sans","Arial Unicode MS",sans-serif;line-height:1;font-style:normal;font-weight:400}.occh-gw{color:#fff;text-shadow:-1px -1px 0 #222, 1px -1px 0 #222, -1px 1px 0 #222, 1px 1px 0 #222, 0 2px 3px rgba(0, 0, 0, .35)}.occh-gb{color:#1a1a1a;text-shadow:0 1px 1px rgba(255, 255, 255, .3), 0 2px 3px rgba(0, 0, 0, .3)}.occh-piece{position:relative;z-index:2;font-size:calc(var(--occh-sq) * .8);pointer-events:none}.occh-gsmall{font-size:15px;margin-left:-2px}.occh-gsmall.occh-gw{text-shadow:-.5px -.5px 0 #222, .5px -.5px 0 #222, -.5px .5px 0 #222, .5px .5px 0 #222}.occh-status{margin:4px
0;font-weight:700;font-size: .98em}.occh-status.occh-over{color:var(--occh-accent)}.occh-invite{margin:4px
0}.occh-invite-row{display:flex;gap:6px;align-items:center}.occh-invite-row .occh-input{margin:0;padding:6px
10px;font-size:14px}.occh-invite-row .occh-btn{flex:none}.occh-offer{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:4px
0;padding:6px
8px;border-radius:8px;background:#fff3e4;font-size: .92em}.occh-controls{margin:6px
0 0;gap:6px}.occh-controls .occh-btn{flex:1 1 auto}.occh-promo{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;background:rgba(0, 0, 0, .55);border-radius:6px}.occh-promo-box{background:#fffaf2;border-radius:12px;padding:8px
10px;text-align:center;box-shadow:0 6px 20px rgba(0, 0, 0, .4)}.occh-promo-title{font-weight:700;font-size: .9em;margin-bottom:4px}.occh-promo-row{display:flex;gap:6px}.occh-promo-btn{appearance:none;cursor:pointer;border:2px
solid var(--occh-accent);border-radius:10px;background:var(--occh-light);padding:2px
6px}.occh-promo-btn:hover{background:#fff}.occh-promo-g{font-size:calc(var(--occh-sq) * .9)}@media (max-width: 480px){.occh-root{padding:8px;border-radius:10px;margin:6px
auto}.occh-btn{padding:8px
12px}.occh-small{padding:6px
10px}}