:root{--cell-size: min(calc(min(100vw, 100vh) / 12), 60px);--gap-size: max(calc(var(--cell-size) * .04), 2px);--board-padding: calc(var(--cell-size) * .2);--domino-border: max(calc(var(--cell-size) * .04), 2px);--pip-size: max(calc(var(--cell-size) * .12), 4px)}@media (orientation: portrait) and (max-width: 768px){:root{--cell-size: min( 15vw , 8.75vh )}.game-header h1{font-size:max(1.2rem,calc(var(--cell-size) * .5))}.difficulty-buttons{gap:calc(var(--cell-size) * .15)}.controls{gap:calc(var(--cell-size) * .12)}.game-container{padding:0 10px;min-height:100vh}.top-controls{margin-bottom:max(10px,calc(var(--cell-size) * .2))}}@media (orientation: landscape) and (max-height: 768px){:root{--cell-size: min( 10.625vw , calc(70vh / 6))}.game-header h1{font-size:max(1rem,calc(var(--cell-size) * .4));margin-bottom:5px}.top-controls{margin-bottom:max(8px,calc(var(--cell-size) * .15))}}@media (max-width: 480px){:root{--cell-size: min(calc(85vw / 6), 7.5vh )}.game-header h1{font-size:max(1rem,calc(var(--cell-size) * .45))}.difficulty-button,.control-button{font-size:max(.7rem,calc(var(--cell-size) * .22));padding:max(6px,calc(var(--cell-size) * .12)) max(12px,calc(var(--cell-size) * .24))}.game-container{padding:0 5px}}@media (min-width: 1200px){:root{--cell-size: 50px}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f5f5f5;touch-action:pan-x pan-y;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}#root{width:100%;min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:min(20px,4vw)}.game-container{max-width:1200px;width:100%;display:flex;flex-direction:column;gap:min(20px,4vw);min-height:100vh;justify-content:flex-start}@media (orientation: portrait) and (max-width: 768px){.game-container{gap:3vw;padding:0}}.game-header{text-align:center;margin-bottom:20px}.game-header h1{color:#333;margin-bottom:10px;font-size:max(1.5rem,calc(var(--cell-size) * .6))}.top-controls{display:flex;flex-direction:column;gap:max(12px,calc(var(--cell-size) * .25));margin-bottom:max(20px,calc(var(--cell-size) * .4));align-items:center}.difficulty-buttons{display:flex;gap:max(10px,calc(var(--cell-size) * .2));justify-content:center;flex-wrap:wrap}.game-controls{display:flex;gap:max(8px,calc(var(--cell-size) * .16));justify-content:center;flex-wrap:wrap}.difficulty-button{padding:max(8px,calc(var(--cell-size) * .16)) max(16px,calc(var(--cell-size) * .32));border:none;border-radius:max(5px,calc(var(--cell-size) * .1));background-color:#007bff;color:#fff;cursor:pointer;font-size:max(.9rem,calc(var(--cell-size) * .28));transition:background-color .2s;white-space:nowrap}.difficulty-button:hover{background-color:#0056b3}.difficulty-button.active{background-color:#28a745}.color-palette-selector{display:flex;align-items:center;justify-content:center;gap:max(8px,calc(var(--cell-size) * .16));margin:max(10px,calc(var(--cell-size) * .2)) 0}.color-palette-selector label{font-size:max(.9rem,calc(var(--cell-size) * .28));font-weight:500;color:#333}.palette-dropdown{padding:max(6px,calc(var(--cell-size) * .12)) max(12px,calc(var(--cell-size) * .24));border:1px solid #ddd;border-radius:max(4px,calc(var(--cell-size) * .08));background-color:#fff;font-size:max(.85rem,calc(var(--cell-size) * .26));cursor:pointer;transition:border-color .2s}.palette-dropdown:hover{border-color:#007bff}.palette-dropdown:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 2px #007bff40}.game-board{display:grid;gap:calc(var(--gap-size) / 3);background-color:#333;padding:calc(var(--board-padding) / 2);border-radius:calc(var(--board-padding) / 4);justify-self:center;position:relative;max-width:100vw;overflow:visible;border:max(1px,calc(var(--cell-size) * .02)) solid #666;touch-action:none}.board-cell{width:var(--cell-size);height:var(--cell-size);border-radius:calc(var(--cell-size) * .05);position:relative;border:max(.5px,calc(var(--cell-size) * .01)) solid #444;min-width:0;min-height:0;touch-action:none;pointer-events:auto}.board-cell.unified-region{border:none}.unified-region .region-condition{position:absolute;bottom:2px;right:4px;font-size:calc(var(--cell-size) * .2);font-weight:700;color:#333;text-shadow:1px 1px 1px rgba(255,255,255,.5);pointer-events:none}.region-condition{position:absolute;bottom:2px;right:2px;font-size:10px;font-weight:700;color:#333;background-color:#fff;padding:1px 3px;border-radius:2px;line-height:1;border:1px solid rgba(0,0,0,.2);z-index:200;pointer-events:none}.dominoes-container{display:flex;flex-wrap:wrap;gap:calc(var(--cell-size) * .12);justify-content:center;margin-top:min(12px,2vw);min-height:calc(var(--cell-size) * 1.2);padding:calc(var(--cell-size) * .08) calc(var(--cell-size) * .12);border:max(1px,calc(var(--cell-size) * .02)) dashed #ccc;border-radius:calc(var(--cell-size) * .1);background-color:#f8f9fa;transition:border-color .2s,background-color .2s}.dominoes-container:hover{border-color:#007bff;background-color:#e3f2fd}.dominoes-container-label{width:100%;text-align:center;color:#6c757d;font-size:max(.7rem,calc(var(--cell-size) * .22));margin-top:calc(var(--cell-size) * .1);line-height:1.3;flex-basis:100%;order:999}.domino-slot{display:flex;align-items:center;justify-content:center;border:none;border-radius:calc(var(--cell-size) * .05);transition:border-color .2s ease;overflow:visible;flex-shrink:0}.domino-slot:empty{border:1px dashed rgba(0,0,0,.1);min-height:calc(var(--cell-size) * 1);min-width:calc(var(--cell-size) * 1)}@media (orientation: portrait) and (max-width: 768px){.dominoes-container{grid-template-columns:repeat(auto-fit,minmax(calc(var(--cell-size) * 2),1fr));gap:calc(var(--cell-size) * .1);padding:calc(var(--cell-size) * .2)}.dominoes-container-label{font-size:calc(var(--cell-size) * .28)}}.domino{width:calc(var(--cell-size) * .85);height:calc(var(--cell-size) * .42);background-color:#ffffffe6;border:var(--domino-border) solid #333;border-radius:calc(var(--cell-size) * .08);display:flex;cursor:grab;position:relative;transition:transform .2s;-webkit-user-select:none;user-select:none;touch-action:none;-webkit-touch-callout:none}.domino:hover{transform:scale(1.05)}.domino.dragging{cursor:grabbing;transform:rotate(5deg);z-index:1000}.domino.horizontal{width:calc(var(--cell-size) * 1.85);height:calc(var(--cell-size) * .85)}.domino.vertical{width:calc(var(--cell-size) * .85);height:calc(var(--cell-size) * 1.85);flex-direction:column}.domino.placed{transform:translate(calc(var(--cell-size) * .06),calc(var(--cell-size) * .06));border-width:max(calc(var(--cell-size) * .06),2.5px);border-color:#000;background-color:#fffffff2;box-shadow:0 1px 3px #0003}.domino-half{flex:1;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.2rem;border-radius:3px;background-color:#ffffff1a}.domino.horizontal .domino-half:first-child{border-right:1px solid #333}.domino.vertical .domino-half:first-child{border-bottom:1px solid #333}.pip{width:var(--pip-size);height:var(--pip-size);background-color:#333;border-radius:50%}.pip-container{width:100%;height:100%;padding:2px}.pip-layout{position:relative;display:flex;justify-content:center;align-items:center}.pip-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.pip-top-left{position:absolute;top:20%;left:20%}.pip-top-right{position:absolute;top:20%;right:20%}.pip-middle-left{position:absolute;top:50%;left:20%;transform:translateY(-50%)}.pip-middle-right{position:absolute;top:50%;right:20%;transform:translateY(-50%)}.pip-bottom-left{position:absolute;bottom:20%;left:20%}.pip-bottom-right{position:absolute;bottom:20%;right:20%}.control-button{padding:max(8px,calc(var(--cell-size) * .16)) max(16px,calc(var(--cell-size) * .32));border:none;border-radius:max(5px,calc(var(--cell-size) * .1));background-color:#6c757d;color:#fff;cursor:pointer;font-size:max(.8rem,calc(var(--cell-size) * .25));transition:background-color .2s;white-space:nowrap}.control-button:hover{background-color:#545b62}.control-button:disabled{background-color:#adb5bd;cursor:not-allowed}.debug-button{background-color:#fd7e14!important;border:1px solid #e85d04}.debug-button:hover{background-color:#e85d04!important}.reset-button{background-color:#dc3545!important;border:1px solid #c82333}.reset-button:hover{background-color:#c82333!important}.generate-button{background-color:#28a745!important;border:1px solid #1e7e34}.generate-button:hover{background-color:#1e7e34!important}.generate-button:disabled{background-color:#6c757d!important;border-color:#6c757d;opacity:.6}.data-controls{display:flex;gap:max(8px,calc(var(--cell-size) * .16));justify-content:center;flex-wrap:wrap;padding-top:max(8px,calc(var(--cell-size) * .16));border-top:1px solid #e0e0e0}.data-button{background-color:#17a2b8!important;border:1px solid #138496}.data-button:hover{background-color:#138496!important}.game-status{text-align:center;margin-top:max(20px,calc(var(--cell-size) * .4));padding:max(10px,calc(var(--cell-size) * .2));border-radius:max(5px,calc(var(--cell-size) * .1));font-weight:700;font-size:max(.9rem,calc(var(--cell-size) * .28))}.status-solved{background-color:#d4edda;color:#155724;border:1px solid #c3e6cb}.status-error{background-color:#f8d7da;color:#721c24;border:1px solid #f5c6cb}.constraint-legend{margin-top:max(15px,calc(var(--cell-size) * .3));padding:max(10px,calc(var(--cell-size) * .2));background-color:#ffffffe6;border-radius:max(8px,calc(var(--cell-size) * .15));border:1px solid #e0e0e0;max-width:100%;transition:background-color .3s ease}.constraint-legend.puzzle-solved{background-color:#28a745e6;border-color:#28a745}.constraint-legend.puzzle-solved .legend-title{color:#fff;text-shadow:1px 1px 2px rgba(0,0,0,.3)}.legend-title{font-weight:700;font-size:max(.9rem,calc(var(--cell-size) * .28));color:#333;margin-bottom:max(8px,calc(var(--cell-size) * .15));text-align:center}.legend-items{display:flex;flex-wrap:wrap;gap:max(12px,calc(var(--cell-size) * .25));justify-content:center}.legend-item{display:flex;align-items:center;gap:max(6px,calc(var(--cell-size) * .12));padding:max(4px,calc(var(--cell-size) * .08)) max(8px,calc(var(--cell-size) * .16));border-radius:max(4px,calc(var(--cell-size) * .08));transition:background-color .3s ease}.legend-item.satisfied{background-color:#d4edda;border:1px solid #c3e6cb}.legend-item.unsatisfied{background-color:#fff;border:1px solid #e0e0e0}.constraint-indicator{font-size:max(1rem,calc(var(--cell-size) * .3));font-weight:700;min-width:max(20px,calc(var(--cell-size) * .4));text-align:center}.legend-item.satisfied .constraint-indicator{color:#155724}.legend-item.unsatisfied .constraint-indicator{color:#6c757d}.legend-color{width:max(16px,calc(var(--cell-size) * .32));height:max(16px,calc(var(--cell-size) * .32));border-radius:50%;border:1px solid #ccc;flex-shrink:0}.legend-text{font-size:max(.8rem,calc(var(--cell-size) * .25));color:#555;white-space:nowrap}@media (max-width: 768px){.legend-items{gap:max(8px,calc(var(--cell-size) * .2))}.legend-text{font-size:max(.7rem,calc(var(--cell-size) * .22))}}.puzzle-editor{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000c;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:20px;z-index:1000;overflow-y:auto}.editor-header{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:800px;background-color:#fff;padding:15px 20px;border-radius:8px;margin-bottom:15px}.editor-header h2{margin:0;color:#333}.editor-controls{background-color:#fff;padding:20px;border-radius:8px;margin-bottom:15px;width:100%;max-width:800px;display:flex;flex-direction:column;gap:15px}.size-controls{display:flex;gap:15px;align-items:center}.size-controls label{display:flex;flex-direction:column;gap:5px;font-weight:500}.size-controls input{padding:8px;border:1px solid #ddd;border-radius:4px;width:80px}.title-control{display:flex;flex-direction:column;gap:5px}.title-control label{font-weight:500}.title-control input{padding:8px;border:1px solid #ddd;border-radius:4px;font-size:16px}.painting-tools{display:flex;flex-direction:column;gap:15px}.color-palette{display:flex;gap:10px;align-items:center}.color-swatch{width:40px;height:40px;border-radius:8px;border:3px solid transparent;cursor:pointer;transition:border-color .2s}.color-swatch:hover{border-color:#333}.color-swatch.active{border-color:#007bff;transform:scale(1.1)}.condition-selector{display:flex;gap:10px;align-items:center}.condition-selector select,.condition-selector input{padding:8px;border:1px solid #ddd;border-radius:4px;font-size:14px}.editor-board{background-color:#fff;padding:20px;border-radius:8px;margin-bottom:15px}.editor-board .game-board{margin:0 auto}.editor-board .board-cell{cursor:pointer;transition:transform .1s}.editor-board .board-cell:hover{transform:scale(1.05)}.region-list{background-color:#fff;padding:20px;border-radius:8px;margin-bottom:15px;width:100%;max-width:800px}.region-list h3{margin-top:0;margin-bottom:15px;color:#333}.region-item{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid #e0e0e0;border-radius:4px;margin-bottom:8px}.region-color{width:20px;height:20px;border-radius:4px;border:1px solid #ccc;flex-shrink:0}.region-item select,.region-item input{padding:4px 8px;border:1px solid #ddd;border-radius:4px;font-size:12px}.condition-preview{font-weight:700;font-size:14px;min-width:30px;text-align:center;background-color:#f8f9fa;padding:4px 8px;border-radius:4px}.editor-actions{background-color:#fff;padding:15px 20px;border-radius:8px;width:100%;max-width:800px;text-align:center}@media (max-width: 768px){.puzzle-editor{padding:10px}.editor-header,.editor-controls,.region-list,.editor-actions{max-width:100%}.size-controls{flex-direction:column;align-items:flex-start}.color-palette,.condition-selector{flex-wrap:wrap}}.custom-puzzles{margin:max(15px,calc(var(--cell-size) * .3)) 0;text-align:center}.custom-puzzles h3{color:#333;margin-bottom:max(10px,calc(var(--cell-size) * .2));font-size:max(1rem,calc(var(--cell-size) * .32))}.custom-puzzle-buttons{display:flex;gap:max(10px,calc(var(--cell-size) * .2));justify-content:center;flex-wrap:wrap}.custom-puzzle-buttons .difficulty-button{max-width:200px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.attribution-footer{margin-top:max(20px,calc(var(--cell-size) * .4));padding:max(15px,calc(var(--cell-size) * .3)) max(20px,calc(var(--cell-size) * .4));background-color:#f8f9fa;border-top:1px solid #e9ecef;border-radius:max(8px,calc(var(--cell-size) * .15)) max(8px,calc(var(--cell-size) * .15)) 0 0;text-align:center}.attribution-footer p{margin:0;font-size:max(.8rem,calc(var(--cell-size) * .25));color:#6c757d;line-height:1.4}.credit-link{color:#007bff;text-decoration:none;font-weight:500;transition:color .2s ease}.credit-link:hover{color:#0056b3;text-decoration:underline}@media (max-width: 480px){.attribution-footer{margin-top:max(15px,calc(var(--cell-size) * .3));padding:max(12px,calc(var(--cell-size) * .25)) max(15px,calc(var(--cell-size) * .3))}.attribution-footer p{font-size:max(.75rem,calc(var(--cell-size) * .23))}}