:root{color-scheme:light;--ink:#263d35;--muted:#788278;--red:#ad4438;--paper:#f5f3eb}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 8% 10%,#e7ecdf,transparent 48%),var(--paper);color:var(--ink);font-family:"Microsoft JhengHei","PingFang TC",sans-serif}button,input,select{font:inherit}button,a,select,input{touch-action:manipulation}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}main{max-width:1200px;margin:auto;padding:24px 40px}header{display:flex;align-items:center;justify-content:space-between;font-size:11px;letter-spacing:2px;border-bottom:1px solid #dce1d5;padding-bottom:20px}header a{display:flex;align-items:center;gap:10px;font-weight:700}.brand-mark{background:var(--ink);color:#faf2d8;display:grid;place-items:center;width:29px;height:29px;font:20px serif;border-radius:5px}.back{font-size:11px;font-weight:400;color:var(--muted);letter-spacing:1px}.online{font-size:11px;letter-spacing:1px;color:var(--muted)}.online i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#5c8662;margin-right:7px}.heading{display:flex;align-items:center;justify-content:space-between;padding:28px 0 30px}.eyebrow{font-size:9px;letter-spacing:3px;color:#7b8b77;margin:0 0 9px}h1{font-family:"PMingLiU",serif;font-size:48px;font-weight:600;letter-spacing:9px;margin:0}h1 span{color:var(--red)}h1 em{font:11px "Microsoft JhengHei",sans-serif;letter-spacing:3px;margin-left:15px;vertical-align:middle;color:var(--muted)}.subtitle{font-size:12px;color:var(--muted);margin:11px 0 0;letter-spacing:1px}.heading-note{display:flex;align-items:center;gap:18px}.heading-note>span{writing-mode:vertical-rl;font:12px serif;letter-spacing:3px;color:#8a8f80}.seal{color:var(--red);border:2px solid #ad44387a;padding:7px 8px;font:22px serif;line-height:1.2;transform:rotate(4deg);border-radius:3px}.layout{display:grid;grid-template-columns:minmax(0,650px) minmax(280px,330px);gap:32px;justify-content:center;align-items:start}.table-area{min-width:0}.player-bar{display:flex;align-items:center;gap:11px;padding:0 7px 15px}.avatar{display:grid;place-items:center;background:#27493e;color:#e9dcc0;border:3px solid #fff7;width:43px;height:43px;border-radius:50%;font:22px serif;box-shadow:0 2px 6px #203c3510}.red-avatar{background:#a5493d;color:#ffead0}.player-bar strong{display:block;font-size:13px;letter-spacing:1px}.player-bar small{display:block;font-size:10px;margin-top:5px;color:var(--muted)}.turn-tag{font-size:10px;letter-spacing:1px;background:#e8ece2;padding:6px 10px;border-radius:20px;color:#8c9787;margin-left:auto;white-space:nowrap}.turn-tag.active{color:#315d48;background:#dfebd9}.turn-tag.thinking{color:#786641;background:#eee6d4}.arena{background:linear-gradient(125deg,#d0ad74,#dec193 45%,#b89662);padding:17px 20px 12px;border:1px solid #ba9763;border-radius:12px;box-shadow:0 15px 32px #40331b12,0 2px 3px #67542f20,inset 0 0 0 4px #ffffff18}.board-top,.board-bottom{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#746040;letter-spacing:1px}.board-top{padding:0 4px 12px}.board-top>span:first-child{font-weight:700}.board-frame{padding:7px 6px;background:repeating-linear-gradient(92deg,#f3dfbb24 0,#ecd3a622 5px,#d4b78522 6px,#f3dfbb22 7px),linear-gradient(135deg,#f3dfbc,#ead0a5);border:1px solid #aa8e5d;box-shadow:inset 0 0 14px #99723d26;border-radius:4px}.files{display:flex;justify-content:space-around;align-items:center;font-size:10px;color:#937851;height:18px}.board{position:relative;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));grid-template-rows:repeat(10,minmax(0,1fr));aspect-ratio:9/10;isolation:isolate}.board-grid{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1}.cell{position:relative;border:0;background:transparent;padding:0;display:grid;place-items:center;min-width:0;min-height:0;border-radius:50%}.piece{position:relative;z-index:2;width:83%;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 30% 15%,#fff7e1,#ead2a7 75%,#c5a06a);border:1px solid #b5935e;box-shadow:0 3px 0 #ab8655,0 5px 5px #65432138,inset 0 0 0 3px #efdeb9,inset 0 0 0 4px #9c7e4b69;font:600 clamp(20px,2.6vw,31px) "PMingLiU",serif;color:#2b3d33;transition:transform .15s,box-shadow .15s,outline .15s;user-select:none}.piece.red{color:var(--red)}.cell:not(:disabled):hover .piece{transform:scale(1.03)}.cell.selected .piece{outline:3px solid #447c5d;outline-offset:2px;transform:scale(1.03)}.cell.target:after{top:50%;left:50%;transform:translate(-50%,-50%);content:'';position:absolute;width:18%;aspect-ratio:1;border-radius:50%;background:#437b59;z-index:3;box-shadow:0 0 0 4px #edf1de8a}.cell.target.capture:after{width:94%;border:2px dashed #548363;background:transparent;box-shadow:none;pointer-events:none}.cell.last:before,.cell.hint-from:before{content:'';position:absolute;inset:6%;border-radius:10px;background:#dfffcb30;border:1px solid #68824875}.cell.last.last-to:before{background:#dfffcb6a}.cell.hint-to:after{transform:none;content:'✧';position:absolute;inset:0;display:grid;place-items:center;font-size:35px;background:#e0efd57a;color:#276143;border:2px dashed #4b8562;border-radius:12px;z-index:4;pointer-events:none}.cell.checked .piece{outline:3px solid #b34335;outline-offset:1px;animation:warning 1.5s ease-in-out infinite}.river-label{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);display:flex;justify-content:space-around;pointer-events:none;font:20px "PMingLiU",serif;letter-spacing:7px;color:#947443;z-index:-1}.board-bottom{padding:11px 4px 0;font-size:9px}.human{padding:17px 7px 14px}.board.small{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));aspect-ratio:4/8;width:min(100%,310px);margin:4px auto;gap:5px;padding:9px;background:#52654c;border:3px solid #45583f;border-radius:6px;box-shadow:inset 0 0 18px #1d302b44}.small .cell{background:#243f2d29;border-radius:4px}.small .piece{width:86%;font-size:29px}.piece.hidden{border-radius:6px;background:repeating-linear-gradient(45deg,#304e42,#304e42 4px,#39594a 4px,#39594a 5px);color:#cad3af;border:1px solid #1c392e;box-shadow:0 3px 0 #24392c,inset 0 0 0 3px #436049;font-size:25px}.status-wrap{display:flex;align-items:center;gap:12px;background:#e9ede2;border:1px solid #dce3d4;border-radius:8px;padding:13px 17px;min-height:68px}.status-wrap>span{color:#62885d;font-size:12px;width:16px;text-align:center}#status{font-size:13px;font-weight:700;letter-spacing:.5px}#statusHelp{font-size:11px;color:#7a8774;margin:5px 0 0}.thinking-icon{height:15px;border:2px solid #b7c5ae;border-top-color:#44785b;border-radius:50%;font-size:0!important;animation:spin .9s linear infinite}.panel{border:1px solid #e0e5d9;border-radius:10px;background:#ffffffa6;padding:19px 20px;margin-bottom:13px;box-shadow:0 3px 10px #203c3503}.panel-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}h2{font-size:13px;letter-spacing:1px;margin:0}.tiny{font-size:8px;color:#94a08c;letter-spacing:1px}.tabs{display:flex;gap:7px;margin-bottom:18px}.tabs button{flex:1;padding:13px 5px;border:1px solid #dde3d5;background:#f4f6ef;border-radius:6px;color:#70816b}.tabs .active{background:var(--ink);border-color:var(--ink);color:#f7f3e7;box-shadow:0 3px 8px #203c3515}.tabs button span{font-size:13px;font-weight:700}.tabs small{display:block;margin-top:6px;font-size:9px;opacity:.7}label{display:block;font-size:11px;margin-bottom:8px;color:#64735e}select{width:100%;padding:11px 10px;border:1px solid #dce2d3;background:#fbfcf6;border-radius:5px;font-size:12px;color:var(--ink)}.field-help{font-size:10px;color:#8b9583;line-height:1.7;margin:9px 0 12px}.toggle{display:flex;align-items:center;gap:6px;font-size:11px;margin:12px 0;cursor:pointer}.toggle input{accent-color:#35634e;margin:0;width:13px;height:13px}.toggle small{font-size:8px;margin-left:auto;background:#e8eddf;padding:3px 6px;border-radius:3px;color:#7d896f}.hints-toggle{margin-bottom:0;font-size:10px;color:#88927e}.actions{display:flex;gap:5px;margin-top:13px}.actions button{flex:1;border:1px solid #dce3d4;background:#f1f4e9;color:#647a5a;border-radius:5px;padding:10px 3px;font-size:11px;white-space:nowrap}.actions .primary{flex:1.5;background:#345c49;color:#fff9e8;border-color:#345c49}button:not(:disabled):hover{filter:brightness(.96)}button:disabled{cursor:default}.actions button:disabled{opacity:.42}.cell:disabled{opacity:1}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #6c9b70;outline-offset:3px}.book-panel{background:#f1f0e3}.book-panel .panel-title{margin-bottom:7px}.book-description{font-size:11px;line-height:1.85;color:#7b8069;min-height:40px;margin:11px 0}.book-meta{display:flex;justify-content:space-between;font-size:9px;color:#909680;margin:10px 0}.book-meta a{text-decoration:underline;text-underline-offset:3px}.book-button{background:transparent;border:1px solid #d4dac4;border-radius:5px;color:#53684b;width:100%;padding:10px;font-size:11px}.history-panel .panel-title{margin-bottom:7px}#history{list-style:none;margin:0;padding:0;max-height:182px;overflow:auto;scrollbar-width:thin;scrollbar-color:#c8d0c0 transparent}#history li{display:flex;align-items:center;padding:8px 0;border-bottom:1px solid #edf0e5;font-size:11px;gap:9px;line-height:1.5}#history li>span{color:#a3ad9a;font-size:9px;width:17px;flex-shrink:0}#history li>strong{font-weight:400;flex:1}.empty{text-align:center;padding:13px 0;color:#a3af98}.empty>span{font:30px serif;color:#bac4b0}.empty p{font-size:10px;margin:7px 0}.ai-report{font-size:9px;color:#89967e;line-height:1.65;padding-top:10px;margin-top:6px;border-top:1px dashed #dce3d3}.rules-panel{padding:15px 20px}.rules-panel summary{font-size:11px;cursor:pointer;list-style:none;display:flex;justify-content:space-between}.rules-panel summary::-webkit-details-marker{display:none}.rules-panel p{font-size:11px;line-height:1.85;color:#828e78}.rules-panel[open] summary span{transform:rotate(45deg)}.review-controls{display:flex;gap:7px;align-items:center;justify-content:center;margin-top:12px;flex-wrap:wrap}.review-controls button{padding:8px 10px;border:1px solid #d1dac9;background:#f7faf1;border-radius:5px;color:#54744e;font-size:11px}.review-controls span{font-size:10px;color:#81916f}.review-controls button:disabled{opacity:.4}footer{display:flex;justify-content:space-between;gap:15px;border-top:1px solid #dce1d4;color:#899680;font-size:9px;letter-spacing:1px;margin-top:36px;padding:20px 0 5px}footer em{color:#b6c0ac;margin:0 5px;font-style:normal}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}[hidden]{display:none!important}@keyframes spin{to{transform:rotate(360deg)}}@keyframes warning{50%{outline-color:#df8b6b}}@media(min-width:1000px){.table-area{position:sticky;top:20px}}@media(max-width:900px){main{padding:20px}.layout{gap:20px;grid-template-columns:minmax(0,1fr) 285px}.panel{padding:16px}.heading-note>span{display:none}h1{font-size:40px}h1 em{display:none}.arena{padding:14px 11px 10px}.piece{font-size:clamp(16px,3vw,28px)}}@media(max-width:700px){main{padding:15px 12px}.layout{display:flex;flex-direction:column}.table-area,aside{width:100%}.heading{padding:23px 4px}.heading-note{display:none}h1{font-size:38px}.subtitle{font-size:11px;letter-spacing:0}.online{display:none}.back{font-size:10px}.arena{padding:13px 12px 10px}.piece{font-size:clamp(19px,5.4vw,31px)}.river-label{font-size:18px}.player-bar{padding-bottom:12px}.human{padding-top:14px}.panel{padding:17px}.setup{margin-top:3px}.tabs button{padding:13px}.board.small{width:min(90%,300px)}.book-description{min-height:0}footer{flex-direction:column;margin-top:18px;gap:9px}.status-wrap{padding:11px 13px}#history{max-height:170px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}


/* Tablet and touch layout: keep board intersections large enough to tap. */
@media (max-width:1023px){
 .layout{display:flex;flex-direction:column;align-items:center}
 .table-area{width:100%;max-width:650px;position:static}
 aside{width:100%;max-width:650px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
 aside .panel{margin:0;min-width:0}
 .history-panel,.rules-panel{grid-column:1/-1}
}
@media (max-width:600px){aside{grid-template-columns:minmax(0,1fr)}}
@media (pointer:coarse){
 main{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right));padding-bottom:max(20px,env(safe-area-inset-bottom))}
 button:not(.cell),select,.toggle,.rules-panel summary,.book-meta a,header a{min-height:44px}
 select{font-size:16px}
 .toggle{margin:5px 0;font-size:13px}
 .toggle input{width:20px;height:20px;flex-shrink:0}
 .actions{flex-wrap:wrap}.actions button{font-size:13px;padding:10px 7px}
 .book-meta{align-items:center;gap:12px}.book-meta a{display:flex;align-items:center}
 .rules-panel summary{align-items:center}
 .player-bar>div:nth-child(2){min-width:0;overflow-wrap:anywhere}
 .board-frame{overflow-x:auto;-webkit-overflow-scrolling:touch}
 .board:not(.small),.files{min-width:396px}
 .board.small{min-width:0}
 #history{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
}
@media (hover:none){
 .cell:not(:disabled):hover .piece,.cell.selected .piece{transform:none}
 button:not(:disabled):hover{filter:none}
}