*,*:before,*:after{box-sizing:border-box}:root{--primary-color: #8B4513;--secondary-color: #D2691E;--accent-color: #FFD700;--dark-wood: #654321;--light-wood: #DEB887;--black: #1a1a1a;--white: #ffffff;--gray: #666666;--red: #ff0000;--green: #00ff00;--blue: #0000ff;--yellow: #ffff00;--purple: #800080;--orange: #ffa500;--pink: #ffc0cb;--cyan: #00ffff;--brown: #a52a2a;--gold: #ffd700;--silver: #c0c0c0;--light-gray: #d3d3d3;--dark-gray: #333333;--transparent: rgba(0, 0, 0, .5);--shadow-color: rgba(0, 0, 0, .3);--mine-icon-url: url(../assets/Pictures/Bomb1.jpeg)}body{margin:0;padding:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-color:#222;color:#eee;display:grid;grid-template-areas:"topbar" "game-container";grid-template-rows:auto 1fr;justify-items:center;min-height:100vh;gap:1rem}body.popup-open{overflow:hidden}.game-container{grid-area:game-container;display:grid;place-items:center;min-height:100vh;max-width:100%;width:100%;padding:1rem}.top-bar{grid-area:topbar;position:absolute;top:1rem;right:1rem;display:flex;gap:.5rem;z-index:1000}.nav-btn{padding:.5rem 1rem;background-color:#444;color:#fff;border:1px solid #000000;border-radius:5px;cursor:pointer;transition:background-color .2s ease-out}.nav-btn:hover{background-color:#666;transition:background-color .2s ease-in}.icon{width:16px;height:16px;vertical-align:middle}.warn-btn{position:fixed;top:15px;left:15px;z-index:100;display:inline-block;background:linear-gradient(45deg,var(--purple),var(--accent-color));color:var(--black);padding:5px 15px;text-decoration:none;border-radius:50px;font-weight:700;font-size:1.1rem;transition:all .3s ease;box-shadow:0 5px 15px #0000004d}.warn-btn:hover{transform:translateY(-3px);box-shadow:0 8px 25px #0006}.popup2{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;padding:2rem;border-radius:10px;box-shadow:0 0 15px #0006;z-index:2000}.logo{width:50px;height:auto;z-index:200}.header-container{justify-content:space-around;display:flex;width:100%;max-width:360px;background-color:#8d0a0a;border-radius:5px;box-shadow:0 0 30px red}.header-button{padding:.5rem 1rem;background-color:#553030;color:#ff1414;box-shadow:0 0 15px red;border-radius:5px;cursor:pointer;transition:background-color .2s ease-out,box-shadow .2s ease-out}.header-button:hover{background-color:#00bff9;box-shadow:0 0 15px #00eaff;transition:background-color .3s ease-in,box-shadow .3s ease-in}.game-header{display:flex;align-items:center;background-color:#333;padding:1rem;border-radius:10px;box-shadow:0 0 15px #0009;justify-content:space-between;width:100%;max-width:400px;margin-bottom:1rem}.info{display:flex;flex-direction:row;justify-content:space-between;gap:4rem}.restart-btn{padding:.4rem 1rem;border:none;border-radius:5px;background-color:#444;color:#fff;cursor:pointer;transition:background-color .2s ease-out}.restart-btn:hover{background-color:#02fff76b;transition:background-color .1s ease-in}.iteration-box{background-color:#222;border:2px solid #ff0000;color:#fff;padding:8px 15px;border-radius:8px;margin:10px auto;text-align:center;font-weight:700;font-size:1.2rem;width:fit-content;box-shadow:0 0 10px red}.game-board{display:grid;gap:2px;border:3px solid #000000}.cell{width:30px;height:30px;background-color:silver;border:2.5px solid #fff;border-right-color:gray;border-bottom-color:gray;text-align:center;line-height:28px;font-weight:700;font-size:26px;-webkit-user-select:none;user-select:none;cursor:pointer;transition:background-color .2s ease,border-color .2s ease}.cell.revealed{background-color:#959595;border:#000000;cursor:default}.cell.mine{background-image:var(--mine-icon-url);background-size:cover;background-position:center;background-repeat:no-repeat}.cell.flagged{background-image:url(../assets/Pictures/CellRevFlag_v2.png);background-size:cover;background-position:center;background-repeat:no-repeat}.cell[data-number="1"]{color:#00f}.cell[data-number="2"]{color:green}.cell[data-number="3"]{color:red}.cell[data-number="4"]{color:navy}.cell[data-number="5"]{color:maroon}.cell[data-number="6"]{color:teal}.cell[data-number="7"]{color:#000}.cell[data-number="8"]{color:gray}.mine-icon-button{width:32px;height:32px;padding:0;border:2.5px solid black;border-radius:5px;background:none;display:flex;align-items:center;justify-content:center;cursor:pointer}.mine-icon-button img{width:100%;height:100%;border-radius:3px;object-fit:cover}.leaderboard{margin-top:2rem;padding:1rem;background-color:#333;border-radius:10px;box-shadow:0 0 15px #0009;width:90%;max-width:360px;color:#fff}.leaderboard h2{text-align:center;margin-bottom:.5rem}.leaderboard-list{list-style:none;padding:0;margin:.5rem}.leaderboard-list li{padding:.3rem 0;border-bottom:1px solid #555;display:flex;justify-content:space-between}.popup{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#000000b3;justify-content:center;align-items:center;z-index:2000;display:none}.popup-content{background-color:#333;padding:2rem;border-radius:10px;box-shadow:0 0 20px #000;color:#fff;width:90%;max-width:400px;text-align:center}.leaderboard-btn{margin-top:1rem;padding:.5rem 1rem;background-color:#444;color:#fff;border:1px solid #000000;border-radius:5px;cursor:pointer;transition:background-color .2s ease-out,box-shadow .2s ease-out}.leaderboard-btn:hover{background-color:#00bff9;box-shadow:0 0 15px #00eaff;transition:background-color .3s ease-in,box-shadow .3s ease-in}.mode-btn{display:block;margin:1rem auto;padding:1rem 1.5rem;font-size:.9rem;border:none;background-color:#555;color:#fff;cursor:pointer;border-radius:6px;transition:background-color .2s ease-out,box-shadow .2s easeout}.mode-btn:hover{background-color:#00bff9;box-shadow:0 0 15px #00eaff;transition:background-color .2s ease-in,box-shadow .2s ease-in}#kiMenu{background:#eee;border:1px solid #ccc;padding:5px;border-radius:6px}#kiMenu button{display:block;width:120px;margin-bottom:5px;background-color:#f0f0f0;cursor:pointer}.game-over{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#333;color:#ef1212;padding:2rem;border-radius:10px;text-align:center;box-shadow:0 0 15px #0009;z-index:999;display:none}.game-over-btn{margin-top:1rem;padding:.5rem 1rem;background-color:#553030;color:#ff1414;border:1px solid #000000;border-radius:5px;cursor:pointer;transition:background-color .2s ease-out,box-shadow .2s ease-out}.game-over-btn:hover{background-color:#00bff9;box-shadow:0 0 15px #00eaff;transition:background-color .3s ease-in,box-shadow .3s ease-in}.game-win{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#333;color:#0f0;padding:2rem;border-radius:10px;text-align:center;box-shadow:0 0 15px #0009;z-index:999;display:none}.game-win-btn{margin-top:1rem;padding:.5rem 1rem;background-color:#00ff1a6f;color:#fff;border:1px solid #000000;border-radius:5px;cursor:pointer;transition:background-color .2s ease-out,box-shadow .2s ease-out}.game-win-btn:hover{background-color:#00bff9;box-shadow:0 0 15px #00eaff;transition:background-color .3s ease-in,box-shadow .3s ease-in}#arcade-view{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000;display:flex;justify-content:center;align-items:center;flex-direction:column;z-index:3000}#pong-canvas{background:#111;border:2px solid white}#exit-arcade{position:absolute;top:1rem;left:1rem;padding:.5rem 1rem;background-color:#444;color:#fff;border:none;border-radius:5px;cursor:pointer;transition:background-color .2s ease-out,box-shadow .2s ease-out}#arcade-menu{display:flex;flex-direction:column;align-items:center;gap:1rem;color:#fff;font-size:1.2rem}#arcade-menu button{padding:.5rem 1.5rem;font-size:1rem;cursor:pointer;background:#444;color:#fff;border:1px solid #999;border-radius:.5rem}#arcade-menu h2{margin-bottom:1rem}@media (max-width: 600px){.game-board{grid-template-columns:repeat(5,30px);grid-template-rows:repeat(5,30px)}.game-header{width:100%;flex-direction:column;align-items:center}.info{flex-direction:column;align-items:center}.restart-btn{width:100%;margin-top:1rem}.game-container{width:100%;padding:1rem}.game-over,.game-win{width:90%;padding:1rem}.game-over-btn,.game-win-btn{width:100%}.cell{width:25px;height:25px;line-height:25px;font-size:14px}}
