*{box-sizing:border-box}html,body,#root{margin:0;padding:0;height:100%}body{font-family:IBM Plex Sans Thai,Sarabun,system-ui,-apple-system,sans-serif;background:#1f1b16;color:#f5efe6}.app{min-height:100%;display:flex;flex-direction:column;align-items:center;padding:1.5rem 1rem;gap:1.25rem}.app__header h1{margin:0;font-size:1.6rem;letter-spacing:.02em}.app__main{display:flex;justify-content:center;width:100%}.play-area{display:flex;flex-wrap:wrap;gap:1.25rem;justify-content:center;align-items:flex-start}.turn-indicator{margin:0;font-size:1.05rem;letter-spacing:.05em;color:#f0e2c0}.turn-indicator--review{color:#ffd84d}.board{display:flex;flex-direction:column;border:3px solid #5a4530;background:#5a4530;box-shadow:0 8px 24px #0006}.board__rank{display:flex}.square{width:clamp(40px,9vw,64px);height:clamp(40px,9vw,64px);display:flex;align-items:center;justify-content:center;border:0;padding:0;margin:0;cursor:pointer;font-size:1.4rem;background:#d8b884;position:relative}.board__rank>.square{border-right:1px solid #7a5c3c;border-bottom:1px solid #7a5c3c}.board__rank>.square:last-child{border-right:0}.board__rank:last-child>.square{border-bottom:0}.square--selected{outline:3px solid #ffd84d;outline-offset:-3px;z-index:1}.square--last-from{background:#c9a060}.square--last-to{background:#e6c178;box-shadow:inset 0 0 0 2px #a06e3273}.piece-img{width:86%;height:86%;object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none;position:relative;z-index:1}.side-panel{display:flex;flex-direction:column;gap:.6rem;width:clamp(220px,30vw,300px);max-height:clamp(360px,72vw,552px)}.replay{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap;background:#2b2218;border:1px solid #5a4530;border-radius:6px;padding:.4rem .5rem}.replay__btn{background:#3b2f24;border:1px solid #6b4f33;color:#f5efe6;padding:.3rem .55rem;border-radius:4px;font:inherit;cursor:pointer;min-width:2.2rem;transition:background .12s ease}.replay__btn:hover:not(:disabled){background:#50412f}.replay__btn:disabled{opacity:.35;cursor:not-allowed}.replay__btn--live{background:#c08a3e;border-color:#c08a3e;color:#1c1208;font-weight:600;margin-left:auto}.replay__btn--live:hover:not(:disabled){background:#d8a058}.replay__counter{color:#d6c7a8;font-variant-numeric:tabular-nums;font-size:.95rem;padding:0 .35rem}.move-list{flex:1;min-height:200px;overflow-y:auto;background:#2b2218;border:1px solid #5a4530;border-radius:6px;padding:.5rem .6rem}.move-list__empty{margin:0;color:#b8a98e;font-style:italic}.move-list__rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.15rem}.move-list__row{display:grid;grid-template-columns:2.2rem 1fr 1fr;gap:.25rem;align-items:center}.move-list__num{color:#b8a98e;font-variant-numeric:tabular-nums;font-size:.9rem}.move-list__cell{font-size:.9rem;text-align:left;padding:.2rem .4rem;border-radius:3px;color:#f5efe6;background:transparent;border:0;font:inherit}.move-list__cell--btn{cursor:pointer}.move-list__cell--btn:hover{background:#3b2f24}.move-list__cell--active{background:#c08a3e;color:#1c1208;font-weight:600}.move-list__cell--empty{color:#6b5a44}.controls{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}.controls__btn{background:#3b2f24;border:1px solid #6b4f33;color:#f5efe6;padding:.55rem 1rem;border-radius:6px;font:inherit;cursor:pointer;transition:background .12s ease}.controls__btn:hover:not(:disabled){background:#50412f}.controls__btn:disabled{opacity:.45;cursor:not-allowed}.modal{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#0009;z-index:10;padding:1rem}.modal__panel{background:#2b2218;color:#f5efe6;border:2px solid #6b4f33;border-radius:10px;padding:1.5rem 2rem;min-width:240px;max-width:90vw;text-align:center;box-shadow:0 12px 40px #00000080}.modal__title{margin:0 0 .4rem;font-size:1.4rem}.modal__subtitle{margin:0 0 1.25rem;color:#d6c7a8}.modal__btn-row{display:flex;gap:.5rem;justify-content:center}.modal__btn{background:#c08a3e;border:0;color:#1c1208;padding:.6rem 1.4rem;border-radius:6px;font:inherit;font-weight:600;cursor:pointer}.modal__btn:hover{background:#d8a058}.modal__btn--secondary{background:#5a4530;color:#f5efe6}.modal__btn--secondary:hover{background:#6f5640}.symmetry-badge{display:inline-block;padding:.4rem .75rem;border-radius:6px;font-size:.85rem;color:#f5efe6;font-weight:600;align-self:center;border:1px solid transparent}.symmetry-badge--rotate{background:#3a6ea5;border-color:#4d83ba}.symmetry-badge--reflect{background:#8a5a44;border-color:#a3705a}.counting-badge{display:inline-block;padding:.4rem .75rem;border-radius:6px;font-size:.85rem;font-weight:600;color:#f5efe6;align-self:center;border:1px solid transparent;font-variant-numeric:tabular-nums}.counting-badge--neutral{background:#3e5d3a;border-color:#547753}.counting-badge--warn{background:#a08230;border-color:#c0a04a;color:#1c1208}.counting-badge--critical{background:#b5462c;border-color:#d36344;animation:counting-pulse 1.1s ease-in-out infinite}@keyframes counting-pulse{0%,to{opacity:1}50%{opacity:.72}}.board-area{display:flex;flex-direction:column;gap:.5rem;align-items:stretch}.clock{display:flex;justify-content:space-between;align-items:baseline;padding:.4rem .85rem;border-radius:6px;background:#2b2218;border:1px solid #5a4530;font-variant-numeric:tabular-nums;color:#d6c7a8;transition:border-color .12s ease,background .12s ease}.clock--active{border-color:#c08a3e;background:#3b2f24;color:#f5efe6}.clock--warn .clock__time{color:#f4c64d}.clock--critical .clock__time{color:#ff8870}.clock--critical-pulse .clock__time{color:#ff8870;animation:clock-pulse .6s ease-in-out infinite}@keyframes clock-pulse{0%,to{opacity:1}50%{opacity:.55}}.clock__label{font-size:.95rem;letter-spacing:.05em}.clock__time{font-size:1.4rem;font-weight:600}.new-game-modal{text-align:left;min-width:360px}.new-game-modal__section-title{margin:.75rem 0 .35rem;color:#d6c7a8;font-size:.95rem;letter-spacing:.04em}.new-game-modal__tc-categories{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.5rem}.new-game-modal__tc-cat{background:#3b2f24;border:1px solid #6b4f33;color:#f5efe6;padding:.45rem .75rem;border-radius:6px;font:inherit;cursor:pointer;transition:background .12s ease,border-color .12s ease}.new-game-modal__tc-cat:hover{background:#50412f}.new-game-modal__tc-cat--active{background:#c08a3e;color:#1c1208;border-color:#c08a3e;font-weight:600}.new-game-modal__tc-presets{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:.5rem}.new-game-modal__tc-preset{background:#2b2218;border:1px solid #5a4530;color:#f5efe6;padding:.35rem .7rem;border-radius:4px;font:inherit;cursor:pointer}.new-game-modal__tc-preset:hover{background:#3b2f24}.new-game-modal__tc-preset--active{background:#c08a3e;color:#1c1208;border-color:#c08a3e;font-weight:600}.new-game-modal__tc-custom{display:flex;flex-wrap:wrap;gap:.75rem;margin:.25rem 0 .5rem}.new-game-modal__tc-field{display:flex;flex-direction:column;gap:.2rem;font-size:.85rem;color:#d6c7a8}.new-game-modal__tc-field input{background:#1c1208;color:#f5efe6;border:1px solid #6b4f33;border-radius:4px;padding:.35rem .5rem;font:inherit;width:6rem}.new-game-modal__players{display:flex;flex-direction:column;gap:.4rem;margin-bottom:.25rem}.new-game-modal__player-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.new-game-modal__player-label{min-width:4.5rem;color:#d6c7a8;font-size:.9rem}.new-game-modal__player-kinds,.new-game-modal__player-levels{display:flex;flex-wrap:wrap;gap:.3rem}.new-game-modal__actions{margin-top:.75rem}.new-game-modal__options{display:flex;flex-direction:column;gap:.5rem;margin:.25rem 0 .5rem}.new-game-modal__option{display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;padding:.75rem 1rem;background:#3b2f24;color:#f5efe6;border:2px solid #6b4f33;border-radius:6px;font:inherit;cursor:pointer;text-align:left;transition:background .12s ease,border-color .12s ease}.new-game-modal__option:hover{background:#50412f}.new-game-modal__option--default{border-color:#c08a3e;box-shadow:0 0 0 2px #c08a3e2e}.new-game-modal__option:focus-visible{outline:2px solid #d8a058;outline-offset:1px}.new-game-modal__option-label{font-weight:700;font-size:1.05rem}.new-game-modal__option-hint{font-size:.85rem;color:#d6c7a8}.app__footer{margin-top:.75rem;font-size:.8rem;color:#b8a98e}.app__footer a{color:#d8c08a}@media (max-width: 720px){.play-area{flex-direction:column;align-items:center}.side-panel{width:min(100%,480px);max-height:none}.move-list{max-height:220px}}.landing{min-height:100%;display:flex;flex-direction:column;padding:1.25rem 1.25rem 2rem;gap:1.25rem;max-width:1280px;width:100%;margin:0 auto}.landing__header{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.landing__header h1{margin:0;font-size:1.5rem;letter-spacing:.02em;flex:0 0 auto}.landing__online-count{font-size:.9rem;color:#d6c7a8;padding:.15rem .55rem;background:#ffffff0f;border-radius:999px}.landing__cta{margin-left:auto;padding:.55rem 1rem;background:#c08a3e;color:#1f1b16;border:none;border-radius:.5rem;font-weight:700;cursor:pointer;font-size:.95rem}.landing__cta:hover{background:#d8a058}.landing__main{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:1.5rem;flex:1 1 auto;min-height:0}.landing__section-title{margin:0 0 .75rem;font-size:1.05rem;color:#f0e2c0}.landing__empty{margin:0;padding:2.5rem 1.25rem;background:#ffffff08;border:1px dashed #50412f;border-radius:.75rem;text-align:center;color:#d6c7a8}.landing__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.85rem}.landing__card-wrap{display:contents}.landing__card{display:flex;flex-direction:column;gap:.5rem;padding:.6rem;background:#ffffff0a;border:1px solid #3a2f23;border-radius:.6rem;cursor:pointer;color:inherit;font:inherit;text-align:left;transition:background .12s ease,border-color .12s ease}.landing__card:hover{background:#ffffff12;border-color:#5a4a32}.landing__card:focus-visible{outline:2px solid #d8a058;outline-offset:1px}.landing__card--ended{opacity:.6}.landing__card-meta{display:flex;flex-direction:column;gap:.25rem;font-size:.85rem}.landing__card-names{display:flex;gap:.4rem;align-items:center;color:#f0e2c0}.landing__card-vs{color:#b8a98e}.landing__card-status{display:flex;gap:.5rem;justify-content:space-between;color:#d6c7a8;font-size:.8rem}.landing__card-spec{color:#d8a058}.landing__see-more{margin-top:.85rem;padding:.5rem 1rem;background:transparent;border:1px solid #50412f;border-radius:.5rem;color:#f5efe6;cursor:pointer;font-size:.9rem}.landing__see-more:hover{background:#ffffff0d}.landing__chat{position:sticky;top:1rem;align-self:flex-start;display:flex;flex-direction:column}.landing__footer{margin-top:1rem;font-size:.8rem;color:#b8a98e}.landing__footer a{color:#d8c08a}.mini-board{display:flex;flex-direction:column;border:1px solid #3a2f23;background:#d8c08a}.mini-board--error{background:#50412f}.mini-board__rank{display:flex}.mini-board__cell{display:flex;align-items:center;justify-content:center}.mini-board__cell:nth-child(odd){background:#ffffff14}.mini-board__rank:nth-child(2n) .mini-board__cell:nth-child(odd){background:#00000014}.mini-board__rank:nth-child(2n) .mini-board__cell:nth-child(2n){background:transparent}.mini-board__piece{width:90%;height:90%;object-fit:contain;pointer-events:none}.chat{display:flex;flex-direction:column;background:#ffffff0a;border:1px solid #3a2f23;border-radius:.75rem;overflow:hidden;min-height:0}.chat--full{height:min(70vh,540px)}.chat--compact{height:280px}.chat__header{display:flex;align-items:center;justify-content:space-between;padding:.6rem .85rem;border-bottom:1px solid #3a2f23;background:#00000026}.chat__title{font-weight:700;color:#f0e2c0}.chat__online{font-size:.8rem;color:#d6c7a8}.chat__list{flex:1 1 auto;overflow-y:auto;padding:.6rem .85rem;display:flex;flex-direction:column;gap:.4rem;font-size:.9rem;min-height:0}.chat__empty{margin:auto;color:#b8a98e}.chat__msg{display:flex;gap:.4rem;flex-wrap:wrap}.chat__name{color:#d8a058;font-weight:700}.chat__name:after{content:":";color:#d6c7a8}.chat__text{flex:1 1 auto;word-break:break-word;color:#f5efe6}.chat__input-form,.chat__name-form{display:flex;gap:.4rem;padding:.6rem .7rem;border-top:1px solid #3a2f23;background:#0000001a}.chat__name-form{flex-direction:column;align-items:stretch}.chat__name-label{display:flex;flex-direction:column;font-size:.85rem;color:#d6c7a8;gap:.3rem}.chat__input,.chat__name-input{flex:1 1 auto;padding:.45rem .6rem;background:#00000040;border:1px solid #3a2f23;border-radius:.4rem;color:#f5efe6;font:inherit;font-size:.9rem}.chat__input:focus,.chat__name-input:focus{outline:2px solid #d8a058;outline-offset:0}.chat__input-form button,.chat__name-form button{padding:.45rem .85rem;background:#c08a3e;color:#1f1b16;border:none;border-radius:.4rem;font-weight:700;cursor:pointer;font-size:.85rem}.chat__input-form button:disabled,.chat__name-form button:disabled{background:#50412f;color:#b8a98e;cursor:not-allowed}.chat__error{margin:0;padding:.4rem .85rem;background:#dc3c3c26;color:#ff9c9c;font-size:.85rem}.app__back{margin-right:auto;padding:.4rem .7rem;background:transparent;border:1px solid #50412f;color:#f5efe6;border-radius:.4rem;cursor:pointer;font-size:.85rem}.app__back:hover{background:#ffffff0d}.app__header{display:flex;align-items:center;gap:.85rem;width:100%;max-width:720px}@media (max-width: 960px){.landing__main{grid-template-columns:1fr}.landing__chat{position:static}.chat--full{height:360px}}.app--online{padding-top:1rem}.new-game-modal__mode-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.6rem}.new-game-modal__text-input{width:100%;padding:.55rem .7rem;background:#00000040;border:1px solid #3a2f23;border-radius:.5rem;color:#f5efe6;font:inherit;font-size:.95rem}.new-game-modal__text-input:focus{outline:2px solid #d8a058;outline-offset:0}.new-game-modal__error{margin:.35rem 0 0;color:#ff9c9c;font-size:.85rem}.online-bar{width:100%;max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:.4rem;padding:.55rem .75rem;background:#ffffff0a;border:1px solid #3a2f23;border-radius:.5rem}.online-bar--disconnected{background:#dc3c3c1f;border-color:#dc3c3c73}.online-bar__left,.online-bar__right{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem}.online-bar__left{font-size:.9rem}.online-bar__right{justify-content:flex-end;margin-left:auto}.online-bar__dot{width:.6rem;height:.6rem;border-radius:50%;flex:0 0 auto}.online-bar__dot--open{background:#4ec07c;box-shadow:0 0 0 3px #4ec07c2e}.online-bar__dot--offline{background:#f77}.online-bar__role{font-weight:700;color:#f0e2c0}.online-bar__opponent{color:#d6c7a8}.online-bar__opponent--waiting{color:#d8a058}.online-bar__opponent-status{margin-left:.3rem;color:#ff9c9c;font-size:.8rem}.online-bar__spec{color:#d8a058;font-size:.85rem}.online-bar__btn{padding:.35rem .65rem;background:#c08a3e;color:#1f1b16;border:none;border-radius:.35rem;font-weight:700;cursor:pointer;font-size:.8rem}.online-bar__btn:hover{background:#d8a058}.online-bar__btn--secondary{background:transparent;border:1px solid #50412f;color:#f5efe6;font-weight:500}.online-bar__btn--secondary:hover{background:#ffffff0d}.online-bar__status{margin:0;font-size:.8rem;color:#ff9c9c}.app__online-error{width:100%;max-width:720px;margin:0 auto;padding:.6rem .85rem;background:#dc3c3c26;border:1px solid rgba(220,60,60,.45);color:#ffb3b3;border-radius:.5rem;display:flex;align-items:center;justify-content:space-between;gap:.75rem}.app__online-error button{padding:.3rem .65rem;background:transparent;border:1px solid rgba(220,60,60,.55);color:#ffb3b3;border-radius:.35rem;font-size:.85rem;cursor:pointer}.side-panel__chat{margin-top:.6rem}@media (max-width: 720px){.online-bar{padding:.55rem .65rem}}.spectator-prompt{width:100%;max-width:720px;margin:0 auto;padding:.6rem .85rem;background:#d8a0581f;border:1px solid rgba(216,160,88,.4);color:#f5efe6;border-radius:.5rem;display:flex;flex-wrap:wrap;align-items:center;gap:.65rem;justify-content:space-between}.spectator-prompt--full{background:#ffffff0a;border-color:#3a2f23;color:#d6c7a8;justify-content:center}.spectator-prompt__label{font-weight:700;color:#f0e2c0}.spectator-prompt__actions{display:flex;gap:.5rem;flex-wrap:wrap}.spectator-prompt__btn{padding:.4rem .75rem;background:#c08a3e;color:#1f1b16;border:none;border-radius:.4rem;font-weight:700;cursor:pointer;font-size:.85rem}.spectator-prompt__btn:hover{background:#d8a058}