*{box-sizing:border-box} html,body{margin:0;padding:0;overflow-x:hidden;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none} html::-webkit-scrollbar,body::-webkit-scrollbar{display:none} body{min-height:100vh;background:#e6e6e6 url("img/XPD_22.PNG") repeat;display:flex;flex-direction:column;align-items:center;font-family:Arial,"Yu Gothic",sans-serif} #startTitle{margin:18px 0 12px;font-size:32px;font-weight:bold;color:#f5f2ff;text-shadow:2px 2px 3px rgba(0,0,0,.884)} #game-area{position:relative;width:min(900px,96vw);aspect-ratio:900/650;overflow:hidden;border-radius:14px;background:#dddddd;box-shadow:0 0 20px rgb(8,32,1)} #gameCanvas{display:block;width:100%;height:100%} #controls{position:absolute;left:50%;top:12px;transform:translateX(-50%);display:flex;justify-content:center;align-items:center;gap:10px;z-index:2;width:max-content;max-width:95%} button{border:0;border-radius:9px;padding:6px 20px;font-size:18px;font-weight:bold;cursor:pointer;box-shadow:0 3px 7px rgba(0,0,0,.25);white-space:nowrap} button:disabled{opacity:.45;cursor:default} #startBtn{background:linear-gradient(#4629e7,#a794f3);color:#fff} #stopBtn{background:linear-gradient(#da87e6,#f0e0ef);color:#ac0e50} #playerTurnBtn{background:linear-gradient(#044111,#8cfa7e);color:#fff} #ruleBtn{background:linear-gradient(#e7e29f,#98b10c)} #status{position:absolute;left:5%;bottom:8px;width:90%;height:52px;padding:6px 16px;border-radius:14px;background:linear-gradient(#f4f1ff,#b0a7d4); color:#222;font-size:18px;font-weight:bold;text-align:center;line-height:1.4;display:flex;align-items:center;justify-content:center;white-space:normal;overflow:hidden;overflow-wrap:anywhere;box-shadow:0 2px 8px rgba(0,0,0,.15)} #ruleModal{display:none;position:absolute;inset:0;z-index:20;align-items:center;justify-content:center} #ruleBox{position:relative;width:70%;max-width:564px;max-height:88%;overflow-y:auto;padding:28px 35px;border-radius:18px;background:rgb(236, 236, 192);color:#222;box-shadow:0 8px 30px rgba(0,0,0,.4)} #ruleModal {display: none;position: absolute;inset: 0;z-index: 20;align-items: center;justify-content: center;} #ruleBox {position: relative;width: 70%;max-width: 564px;max-height: 88%;overflow-y: auto;padding: 28px 35px;border-radius: 18px; background: rgb(236, 236, 192);color: #222;box-shadow: 0 8px 30px rgba(0,0,0,.4);-ms-overflow-style: none;scrollbar-width: none;} #ruleBox::-webkit-scrollbar {display: none;} #ruleBox h2{margin:0 0 20px;text-align:center;font-size:25px} #ruleBox p{margin:9px 0;font-size:16px;line-height:1.5;font-weight:bold} #ruleClose{position:absolute;top:8px;right:12px;padding:2px 9px;font-size:25px;line-height:1;box-shadow:none;color:#fff8f8;background:#ee2277} .rulePieces{margin-top:18px;padding:12px;border-radius:10px;background:#ecc05f;text-align:center;font-weight:bold} @media(max-width:600px){ #startTitle{font-size:25px} #controls{top:8px;gap:6px} button{font-size:13px;padding:7px 10px} #status{left:4%;width:92%;height:42px;bottom:5px;padding:4px 10px;font-size:13px;line-height:1.3} #ruleBox{width:88%;padding:25px 20px} #ruleBox h2{font-size:20px} #ruleBox p{font-size:13px} .rulePieces{font-size:12px} }