:root{--board-size-vmin:90vmin;--board-max-size:600px;--border-width:15px;--pocket-percent:10%;--pocket-offset:5%;--baseline-inset:15%;--baseline-thickness:2px;--baseline-area-color:rgba(0, 0, 0, 0.05);--baseline-line-color:rgba(0, 0, 0, 0.2);--striker-color:#add8e6;--striker-border:#4682b4;--player1-color:#3498db;--player2-color:#e74c3c}body{display:flex;justify-content:center;align-items:center;min-height:100vh;background-color:#e8e8e8;margin:0;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;overflow:hidden}#game-setup{background-color:#fff;padding:30px;border-radius:10px;box-shadow:0 5px 15px rgba(0,0,0,.1);text-align:center;display:none}#game-setup.active{display:block}#game-setup h2{margin-top:0;margin-bottom:20px;color:#333}.setup-section{margin-bottom:15px}.setup-section label{display:inline-block;margin-right:10px;min-width:120px;text-align:right}.setup-section input[type=text],.setup-section select{padding:8px;border:1px solid #ccc;border-radius:4px;min-width:150px}.player-names div{margin-bottom:10px}#start-game-button{padding:12px 25px;font-size:1.1em;cursor:pointer;background-color:#2ecc71;color:#fff;border:none;border-radius:5px;transition:background-color .2s;margin-top:15px}#start-game-button:hover{background-color:#27ae60}#game-container{display:none;flex-direction:column;align-items:center;width:100%;max-width:calc(var(--board-max-size) + 50px)}#game-container.active{display:flex}#ui-container{display:flex;justify-content:space-between;align-items:center;width:100%;margin-bottom:10px;padding:10px 15px;background-color:#fff;border-radius:8px;box-shadow:0 2px 5px rgba(0,0,0,.1);box-sizing:border-box}.player-info{display:flex;flex-direction:column;align-items:center;padding:5px 15px;border-radius:6px;transition:background-color .3s ease}#player-info-1{border:2px solid var(--player1-color)}#player-info-2{border:2px solid var(--player2-color)}.player-info.current-turn{background-color:rgba(255,255,0,.3)}.player-name{font-size:.9em;font-weight:700;margin-bottom:3px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#player-info-1 .player-name{color:var(--player1-color)}#player-info-2 .player-name{color:var(--player2-color)}.player-score{font-size:1.4em;font-weight:700}#turn-indicator{text-align:center;font-size:1em}#current-player-name{font-weight:700}#message-display{color:#e74c3c;font-weight:700;font-size:.85em;min-height:1.2em;margin-top:3px}#controls-container{display:flex;justify-content:space-between;align-items:center;width:100%;margin-bottom:15px}#reset-button{padding:8px 15px;font-size:.9em;cursor:pointer;background-color:#e67e22;color:#fff;border:none;border-radius:4px;transition:background-color .2s}#reset-button:hover{background-color:#d35400}.zoom-controls{display:flex;align-items:center}.zoom-controls span{margin:0 8px;font-size:.9em}.zoom-controls button{padding:5px 10px;font-size:1.1em;line-height:1;cursor:pointer;background-color:#bdc3c7;color:#2c3e50;border:1px solid #95a5a6;border-radius:4px}.zoom-controls button:hover{background-color:#abb2b9}#board-wrapper{width:var(--board-size-vmin);max-width:var(--board-max-size);aspect-ratio:1/1;position:relative}#carrom-board{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#deb887;background-image:linear-gradient(45deg,#d2a671 25%,transparent 25%),linear-gradient(-45deg,#d2a671 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d2a671 75%),linear-gradient(-45deg,transparent 75%,#d2a671 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0;border:var(--border-width) solid #5c3a21;box-shadow:0 10px 20px rgba(0,0,0,.2);overflow:hidden;border-radius:5px;box-sizing:border-box;touch-action:none;transition:transform .6s ease-in-out;transform-origin:center center}#carrom-board.flipped{transform:rotate(180deg)}.pocket{width:var(--pocket-percent);height:var(--pocket-percent);background-color:#222;border-radius:50%;position:absolute;transform:translate(-50%,-50%)}.pocket.top-left{top:var(--pocket-offset);left:var(--pocket-offset)}.pocket.top-right{top:var(--pocket-offset);left:calc(100% - var(--pocket-offset))}.pocket.bottom-left{top:calc(100% - var(--pocket-offset));left:var(--pocket-offset)}.pocket.bottom-right{top:calc(100% - var(--pocket-offset));left:calc(100% - var(--pocket-offset))}.baseline{position:absolute;background-color:var(--baseline-area-color);pointer-events:none;left:var(--baseline-inset);width:calc(100% - 2 * var(--baseline-inset));height:calc(100% - 2 * var(--baseline-inset))}.baseline.top{top:var(--baseline-inset);height:var(--baseline-thickness);background-color:var(--baseline-line-color)}.baseline.bottom{bottom:var(--baseline-inset);height:var(--baseline-thickness);background-color:var(--baseline-line-color)}.baseline-marker{position:absolute;width:2%;height:2%;background-color:transparent;border:calc(var(--baseline-thickness)/ 1.5) solid var(--baseline-line-color);border-radius:50%;transform:translate(-50%,-50%);box-sizing:border-box}.baseline-marker.top-left{top:var(--baseline-inset);left:var(--baseline-inset)}.baseline-marker.top-right{top:var(--baseline-inset);left:calc(100% - var(--baseline-inset))}.baseline-marker.bottom-left{top:calc(100% - var(--baseline-inset));left:var(--baseline-inset)}.baseline-marker.bottom-right{top:calc(100% - var(--baseline-inset));left:calc(100% - var(--baseline-inset))}#center-circle{position:absolute;top:50%;left:50%;width:15%;height:15%;border:2px solid #000;border-radius:50%;transform:translate(-50%,-50%);box-sizing:border-box;pointer-events:none}#center-circle::before{content:'';position:absolute;top:50%;left:50%;width:10%;height:10%;background-color:red;border-radius:50%;transform:translate(-50%,-50%)}#striker,.coin{position:absolute;border-radius:50%;box-shadow:1px 1px 3px rgba(0,0,0,.3);box-sizing:border-box;transform:translate(-50%,-50%);will-change:transform}.coin{width:4%;height:4%;border:1px solid rgba(0,0,0,.5)}.coin.white{background-color:#f8f8f8}.coin.black{background-color:#333}.coin.red{background-color:#ff4136}#striker{width:6%;height:6%;background-color:var(--striker-color);border:2px solid var(--striker-border);cursor:grab;z-index:10}#striker.placing{cursor:ew-resize}#striker.aiming{cursor:crosshair}#striker:active{cursor:grabbing}#arrow-guide{position:absolute;height:2px;background-color:rgba(255,0,0,.6);transform-origin:0 50%;pointer-events:none;z-index:5;border-radius:1px}@media (max-width:600px){:root{--border-width:10px}#ui-container{padding:8px 10px;flex-wrap:wrap;justify-content:center}.player-info{padding:5px 10px}.player-name{font-size:.8em;max-width:100px}.player-score{font-size:1.2em}#turn-indicator{width:100%;order:1;margin-bottom:5px}#player-info-1{order:0}#player-info-2{order:2}#controls-container{flex-direction:column;align-items:stretch}#reset-button{margin-bottom:10px}.zoom-controls{justify-content:center}}@media (max-height:650px){#game-container{max-width:100%}#controls-container,#ui-container{margin-bottom:5px}}