.pips-solver{display:grid;align-items:flex-start;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}
.wrap{--max-h:520px;margin-top:20px;margin-bottom:20px;position:relative;justify-self:center;aspect-ratio:var(--cols)/var(--rows);width:min(100%,calc(var(--col-width)*(var(--cols))));}
.board{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--cols),minmax(auto,60px));grid-template-rows:repeat(var(--rows),minmax(auto,60px));gap:0;--cell:calc(100%/var(--cols));--g:max(2px,calc(var(--cell)*.06));--ov-stroke:max(2px,calc(var(--cell)*.06));--ov-radius:calc(var(--cell)*.16);--ov-z:3;--badge-size:clamp(16px,44%,40px);--badge-offset:clamp(8px,22%,22px);--region-opacity:.3;--pips-beige:#ebdcd8;--pips-beige-2:#d9bdb3;justify-content:center;}
.slot{position:relative;overflow:visible;}
.slot.active{background:var(--pips-beige-2);}
.slot.clickable{cursor:pointer;}
.tile{position:absolute;inset:var(--g);background:var(--pips-beige);border-radius:clamp(6px,calc(var(--cell)*.12),12px);z-index:1;}
.ov{position:absolute;z-index:var(--ov-z);pointer-events:none;border-style:dashed;border-color:var(--ov-stroke-color,#6b4fd1);box-sizing:border-box;}
.ov:before{content:"";position:absolute;inset:0;background:var(--ov-fill,transparent);border-radius:inherit;}
.tone-purple{--ov-fill:rgba(128,70,177,var(--region-opacity));--ov-stroke-color:#8046b1;--badge-bg:#9251ca;}
.tone-pink{--ov-fill:rgba(249,58,122,var(--region-opacity));--ov-stroke-color:#ea004e;--badge-bg:#db137a;}
.tone-teal{--ov-fill:rgba(0,163,184,var(--region-opacity));--ov-stroke-color:#006471;--badge-bg:#008293;}
.tone-orange{--ov-fill:rgba(253,157,9,var(--region-opacity));--ov-stroke-color:#ca4e00;--badge-bg:#d15609;}
.tone-blue{--ov-fill:rgba(70,79,177,var(--region-opacity));--ov-stroke-color:#003674;--badge-bg:#464fb1;}
.tone-green{--ov-fill:rgba(84,118,1,var(--region-opacity));--ov-stroke-color:#4c6b00;--badge-bg:#547601;}
.badge{position:absolute;z-index:4;width:var(--badge-size);height:var(--badge-size);display:grid;place-items:center;color:#fff;font-weight:800;line-height:1;border-radius:6px;transform:rotate(45deg);box-shadow:0 1px #0000002e;background:var(--badge-bg,#7b5cd6);}
.badge>span{transform:rotate(-45deg);font-size:calc(var(--badge-size)*0.8);}
.pos-br{right:calc(-1*var(--badge-offset));bottom:calc(-1*var(--badge-offset));}
.pos-tr{right:calc(-1*var(--badge-offset));top:calc(-1*var(--badge-offset));}
.pos-bl{left:calc(-1*var(--badge-offset));bottom:calc(-1*var(--badge-offset));}
.pos-tl{left:calc(-1*var(--badge-offset));top:calc(-1*var(--badge-offset));}
.pos-r{right:calc(-1*var(--badge-offset));top:50%;transform:translateY(-50%) rotate(45deg);}
.pos-l{left:calc(-1*var(--badge-offset));top:50%;transform:translateY(-50%) rotate(45deg);}
.pos-t{top:calc(-1*var(--badge-offset));left:50%;transform:translate(-50%) rotate(45deg);}
.pos-b{bottom:calc(-1*var(--badge-offset));left:50%;transform:translate(-50%);}

.justify-center{justify-content:center;}
.items-center{align-items:center;}
.w-full{width:100%;}
.flex{display:flex;}
.item-grid{top:var(--g);right:var(--g);bottom:var(--g);left:var(--g);border-top-width:var(--ov-stroke);border-right-width:var(--ov-stroke);border-bottom-width:var(--ov-stroke);border-left-width:var(--ov-stroke);border-top-left-radius:var(--ov-radius);border-top-right-radius:var(--ov-stroke);border-bottom-right-radius:var(--ov-stroke);border-bottom-left-radius:var(--ov-radius);}
.item-grid-left{left:calc(-1*var(--g));border-left-width:0;border-top-left-radius:0;border-bottom-left-radius:0;}
.item-grid-right{right:calc(-1*var(--g));border-right-width:0;border-top-right-radius:0;border-bottom-right-radius:0;}
.item-grid-top{top:calc(-1*var(--g));border-top-width:0;border-top-left-radius:0;border-top-right-radius:0;}
.item-grid-bottom{bottom:calc(-1*var(--g));border-bottom-width:0;border-bottom-right-radius:0;border-bottom-left-radius:0;}

.tray{gap:8px;width:100%;display:grid;max-width:620px;grid-template-columns:repeat(5,1fr);justify-content:flex-start;}
.btn{all:unset;display:block;width:100%;max-width:120px;aspect-ratio:2/1;background:#eee;cursor:pointer;}
.dom-full{display:block;width:100%;height:100%;--dom-radius:6px;--dom-stroke:2px;--dom-stroke-color:#2b2b2b;--dom-inner-stroke:2px;--dom-inner-inset:6px;--dom-divider:#e5e5e5;--pip:#222;--shadow:0 4px 0 rgba(0,0,0,.18);--pip-size:14%;}
.dom-half{position:relative;width:100%;height:100%;background:#f7f7f7;border-radius:var(--dom-radius);display:flex;overflow:hidden;border:var(--dom-stroke) solid var(--dom-stroke-color);}
.dom-half1{position:relative;width:100%;height:100%;background:#f7f7f7;border-radius:var(--dom-radius);display:flex;overflow:hidden;}
.dom-right{border-left:1px solid var(--dom-divider);}
.half{position:relative;flex:1 1 50%;}
.pip{position:absolute;width:var(--pip-size);height:var(--pip-size);border-radius:50%;background:var(--pip);transform:translate(-50%,-50%);}
.pip-left-top{top:22%;left:22%;}
.pip-right-top{top:22%;left:78%;}
.pip-left-center{top:50%;left:22%;}
.pip-center{top:50%;left:50%;}
.pip-right-center{top:50%;left:78%;}
.pip-left-bottom{top:78%;left:22%;}
.pip-right-bottom{top:78%;left:78%;}
.ghost{opacity:.38;filter:saturate(.2);}

.board-div{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:10px 0;justify-content:center}
.board-label{display:flex;align-items:center;gap:5px}
.board-input{width:60px;padding:5px;border:1px solid #ccc;border-radius:4px;text-align:center}
.board-gen-button{padding:6px 12px;background-color:#2563eb;color:white;border:none;border-radius:4px;cursor:pointer;font-weight:bold}
.setting-container{display:flex;flex-direction:column;gap:15px;margin:20px 5px}
.condition-setting{padding:10px;border:1px solid #ccc;border-radius:6px;background-color:#f9f9f9;box-shadow:0 2px 5px rgba(0,0,0,.1)}
.condition-setting h3{margin-top:0;margin-bottom:10px}
.setting-button{padding:5px 10px;border:none;border-radius:4px;color:white;cursor:pointer;font-weight:bold}
.setting-button-region{background-color:#2196F3}
.setting-button-dice{background-color:#4CAF50}
.setting-button-region:hover{background-color:#1976D2}
.setting-button-dice:hover{background-color:#45A049}
.condition-setting>div{margin-top:10px}
.setting-button-del{margin-left:5px;padding:2px 6px;background-color:#f44336;color:white;border:none;border-radius:3px;cursor:pointer;width:30px}
.dom-half2{background:none}
.toast{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.8);min-width:50px;padding:15px 25px;background-color:rgba(0,0,0,.85);color:#fff;font-size:16px;text-align:center;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease;z-index:9999}
.toast.show{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto}
.dom-zero{background:#ccc;border-radius:50%}

.btn.used,.btn:disabled{opacity:.4;pointer-events:none}
.domino-placeholder{background:rgba(0,0,0,.1);border:2px dashed #ccc;border-radius:4px;width:100%;height:100%}
.drag-board{pointer-events:auto;z-index:1}
.drag-slot{position:relative;display:flex;align-items:center;justify-content:center}
.drag-slot.occupied{pointer-events:auto}
.drag-slot .domino-main{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:15}
.drag-slot .domino-placeholder{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80%;height:80%;background:rgba(100,150,255,.2);border:2px dashed rgba(100,150,255,.5);border-radius:4px;z-index:12}

.board-div-bottom { display: flex; }
@media (max-width:600px){.cells-label{display:none}}
@media (max-width:600px){.badge>span{font-size:8px;}.wrap{margin-bottom: 0px;}}
@media (max-width:600px){.pips-solver{grid-template-columns:repeat(1,minmax(0,1fr));gap: 0px;} .board{margin-bottom:20px;}}