.as-halma{--ink:#28352e;--green:#315e48;--paper:#fffaf0;color:var(--ink);font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;max-width:1080px;margin:20px auto}.as-halma *{box-sizing:border-box}.as-halma .halma-shell{padding:clamp(8px,2.5vw,26px);border-radius:24px;background:#e2e9e0}.as-halma .halma-hero{text-align:center;margin-bottom:22px}.as-halma .halma-kicker{margin:0;color:#527061;font-size:.75rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase}.as-halma h2{margin:5px 0;font:600 clamp(2rem,6vw,3.5rem)/1.1 Georgia,serif}.as-halma .halma-hero>p:last-child{margin:8px 0;color:#65736b}.as-halma .halma-layout{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:18px}.as-halma .halma-panel{min-width:0;padding:16px;background:var(--paper);border:1px solid #ffffffb8;border-radius:20px;box-shadow:0 12px 32px #34443a20}.as-halma .halma-players{display:flex;align-items:center;justify-content:space-between;gap:5px;text-align:center}.as-halma .halma-players>span{display:flex;align-items:center;gap:5px;padding:6px;border:2px solid transparent;border-radius:12px;opacity:.65}.as-halma .halma-players>span.active{border-color:#57906c;background:#e7f1e7;opacity:1}.as-halma .halma-players>strong{color:var(--green);font-size:.9rem}.as-halma .halma-stone{display:inline-block;width:22px;aspect-ratio:1;border-radius:50%;box-shadow:inset 0 -3px 6px #0003,0 2px 4px #0003}.as-halma .halma-stone.white,.as-halma .halma-cell.white::after{border:1px solid #958b79;background:radial-gradient(circle at 35% 28%,#fff,#f4eddf 68%,#b9ad9c)}.as-halma .halma-stone.black,.as-halma .halma-cell.black::after{background:radial-gradient(circle at 35% 28%,#68736b,#202722 65%,#080a09)}.as-halma .halma-status{text-align:center;min-height:2.7em;margin:10px 0}.as-halma .halma-board-frame{width:min(100%,680px);margin:auto;padding:clamp(3px,1.4vw,10px);border:4px solid #855a38;border-radius:18px;background:#bc8651;box-shadow:0 8px 18px #352e2426}.as-halma .halma-board{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));grid-template-rows:repeat(11,minmax(0,1fr));width:100%;aspect-ratio:1;gap:clamp(1px,.35vw,3px);padding:clamp(2px,.8vw,7px);border-radius:10px;background:#8c6242}.as-halma .halma-cell{position:relative;min-width:0;min-height:0;width:100%;height:100%;padding:0;border:0;border-radius:3px;background:#f3d4a5;cursor:pointer;touch-action:manipulation;appearance:none;-webkit-appearance:none}.as-halma .halma-cell:nth-child(even){background:#ebc698}.as-halma .halma-cell.white-camp{background:#e7e9d9}.as-halma .halma-cell.black-camp{background:#d3dfd2}.as-halma .halma-cell::after{content:"";position:absolute;inset:12%;border-radius:50%;pointer-events:none}.as-halma .halma-cell.white::after,.as-halma .halma-cell.black::after{box-shadow:inset 0 -4px 7px #0003,0 2px 4px #0004}.as-halma .halma-cell.possible::before{content:"";position:absolute;inset:30%;border-radius:50%;background:#237b50;box-shadow:0 0 0 3px #ffffff9c}.as-halma .halma-cell.selected{outline:3px solid #f0a327;outline-offset:-3px}.as-halma .halma-cell.last:not(.selected){box-shadow:inset 0 0 0 2px #bd734a}.as-halma .halma-cell:focus-visible{outline:3px solid #1468a8;outline-offset:-3px}.as-halma .halma-cell:disabled{opacity:1;cursor:default}.as-halma .halma-help{text-align:center;margin:10px 0 0;color:#65736b;font-size:.85rem}.as-halma h3{margin:7px 0 12px;font:600 1.35rem Georgia,serif}.as-halma .halma-controls{display:grid;gap:9px}.as-halma button:not(.halma-cell){min-height:44px;padding:10px 14px;border:0;border-radius:999px;background:var(--green);color:#fff;font:700 .94rem system-ui;cursor:pointer}.as-halma button.halma-secondary{border:1px solid #a8b4a9;background:#eef3ed;color:#294837}.as-halma button:disabled{opacity:.48;cursor:default}.as-halma .halma-rules{margin-top:18px;border-top:1px solid #d8dfd8;padding-top:8px;font-size:.93rem}.as-halma .halma-rules ul{padding-left:20px}.as-halma .halma-rules li{margin:9px 0}.as-halma [hidden]{display:none!important}@media(max-width:820px){.as-halma .halma-layout{grid-template-columns:1fr}.as-halma .halma-controls{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:550px){.as-halma{margin:8px auto}.as-halma .halma-shell{padding:8px 4px}.as-halma .halma-main{padding:10px 4px}.as-halma .halma-board-frame{border-width:2px;padding:3px}.as-halma .halma-cell::after{inset:9%}.as-halma .halma-players{font-size:.82rem}.as-halma .halma-stone{width:18px}.as-halma .halma-controls{grid-template-columns:1fr}}
.as-halma .halma-counter{padding:10px 12px;border-radius:12px;background:#f1e4c8;font-size:.89rem;text-align:center}.as-halma .halma-draw-offer{grid-column:1/-1;padding:12px;border-radius:12px;background:#e7f1e7;text-align:center}.as-halma .halma-draw-offer p{margin:0 0 10px}.as-halma .halma-draw-offer button{width:100%;margin-top:6px}
.as-halma .halma-mode-panel{max-width:760px;margin:0 auto;text-align:center;padding:24px}.as-halma .halma-choice-row{display:flex;justify-content:center;gap:16px;margin:0 0 18px}.as-halma .halma-choice-row label{width:min(260px,48%);text-align:left;font-weight:700}.as-halma select,.as-halma input{display:block;width:100%;min-height:44px;margin-top:6px;padding:8px 10px;border:1px solid #a8b4a9;border-radius:9px;background:#fff;color:var(--ink);font:inherit}.as-halma .halma-mode-buttons{display:flex;justify-content:center;flex-wrap:wrap;gap:10px}.as-halma .halma-online-options{margin-top:20px;padding-top:18px;border-top:1px solid #d8dfd8}.as-halma .halma-online-options>label{display:inline-block;width:min(220px,100%);text-align:left;font-weight:700}.as-halma .halma-online-options>span{margin:0 10px}.as-halma .halma-online-options p:last-child{min-height:1.5em;color:#694a19}.as-halma .halma-room-info{margin:8px 0 12px;padding:9px;border-radius:10px;background:#e7f1e7;text-align:center;font-weight:700;overflow-wrap:anywhere}.as-halma .halma-players span span{max-width:115px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:560px){.as-halma .halma-choice-row{display:grid;grid-template-columns:1fr}.as-halma .halma-choice-row label{width:100%}.as-halma .halma-mode-buttons{display:grid}.as-halma .halma-online-options>button{width:100%;margin-top:8px}.as-halma .halma-online-options>span{display:block}.as-halma .halma-players span span{max-width:65px}}