:root{--cell-size:28px;--cell-font:18px}body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;display:flex;flex-direction:column;align-items:center;background-color:#1a1a1a;color:#ccc;padding:20px;min-height:100vh;box-sizing:border-box;justify-content:center;-webkit-user-select:none;user-select:none;touch-action:manipulation;overflow:hidden}h1{color:#fff;font-weight:400;margin-bottom:20px}#main-content{display:flex;gap:10px;align-items:stretch}#game-container{background-color:#2b2b2b;padding:10px 0;border-radius:10px;box-shadow:0 6px 15px rgba(0,0,0,0.6);position:relative;overflow:hidden;width:fit-content;display:flex;flex-direction:column;min-height:100%}#game-container:fullscreen,#game-container.theater-mode{position:fixed;top:0;left:0;right:0;bottom:0;border-radius:0;padding:0;width:100vw;height:100vh;background-color:#1a1a1a;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;z-index:9999;overflow:hidden}#game-container:fullscreen #status-bar,#game-container.theater-mode #status-bar{position:relative;width:100%;flex:0 0 50px;padding:5px 20px;margin:0;border-radius:0;box-sizing:border-box;z-index:10;border-bottom:1px solid #333}#game-container:fullscreen #board,#game-container.theater-mode #board{flex:1 1 auto;margin:0;--cell-size:min(calc((100vh - 210px)/ 16),calc(100vw / 30));--cell-font:calc(var(--cell-size)* 0.65);display:grid;align-self:center;margin-top:auto;margin-bottom:auto;border:none;box-shadow:0 0 50px rgba(0,0,0,0.8)}#game-container:fullscreen #chat-container,#game-container.theater-mode #chat-container{position:relative;width:100%;flex:0 0 auto;margin-top:0;background-color:#2b2b2b;border-top:none}#game-container:fullscreen #chat-messages,#game-container.theater-mode #chat-messages{box-sizing:border-box;height:90px;min-height:90px;flex-grow:0}body.theater-active > *:not(#main-content){display:none}#result-screen{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:auto;min-width:250px;max-width:90%;background:rgba(0,0,0,0.15);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);border-radius:16px;border:1px solid rgba(255,255,255,0.15);box-shadow:0 10px 40px rgba(0,0,0,0.4);display:none;flex-direction:column;justify-content:center;align-items:center;text-align:center;z-index:105;color:#fff;font-size:18px;padding:30px 25px;will-change:opacity;box-sizing:border-box}#result-screen.visible{display:flex}#result-screen h2{margin:0 0 15px 0;font-size:32px;letter-spacing:1px;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,1)}#result-details{margin-bottom:20px;line-height:1.5;text-shadow:0 1px 3px rgba(0,0,0,1);color:#fff;font-weight:500}#play-again-button{padding:12px 25px;border:1px solid rgba(255,255,255,0.2);border-radius:6px;background:rgba(0,0,0,0.3);color:white;font-size:16px;font-weight:bold;cursor:pointer;box-shadow:0 4px 6px rgba(0,0,0,0.2);transition:all 0.2s ease;backdrop-filter:blur(1px)}#play-again-button:hover{background:rgba(0,0,0,0.5);transform:translateY(-2px);box-shadow:0 6px 12px rgba(0,0,0,0.3)}#play-again-button:active{transform:translateY(0)}#game-message{position:absolute;left:50%;top:50%;transform:translate(-50%,calc(-50% - 230px));opacity:0;transition:opacity 0.4s ease-out,transform 0.4s ease-out;padding:10px 30px;border-radius:50px;font-size:20px;font-weight:600;letter-spacing:0.5px;z-index:110;text-align:center;white-space:nowrap;pointer-events:none;box-shadow:0 5px 15px rgba(0,0,0,0.1);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);max-width:90%;overflow:hidden;text-overflow:ellipsis}#game-message.visible{opacity:1;transform:translate(-50%,calc(-50% - 220px))}#game-message.win-msg{color:#e0ffe0;background:rgba(0,100,0,0.15);border:1px solid rgba(100,255,100,0.2);text-shadow:0 1px 3px rgba(0,0,0,0.8)}#game-message.lost-msg{color:#ffe0e0;background:rgba(100,0,0,0.15);border:1px solid rgba(255,100,100,0.2);text-shadow:0 1px 3px rgba(0,0,0,0.8)}#status-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:0px;padding:8px;background-color:#3c3c3c;border-radius:6px}.counter-display{font-family:'Consolas',monospace;font-size:32px;color:#ff0000;background-color:#000;padding:4px 10px;border-radius:4px;width:70px;text-align:right;margin:0 5px;letter-spacing:2px}#reset-button{font-size:0;line-height:0;cursor:pointer;width:45px;height:45px;text-align:center;border:none;border-radius:50%;color:transparent;outline:none;margin:0 5px;position:relative;overflow:hidden}#reset-button.status-alive{background-color:green}#reset-button.status-lost{background-color:red}#reset-button.status-win{background-color:blue}#reset-button.loading::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);animation:pulse 1s infinite}@keyframes pulse{0%{opacity:0.3}50%{opacity:0.7}100%{opacity:0.3}}#reset-button.status-alive:hover{background-color:#009900}#reset-button.status-lost:hover{background-color:#cc0000}#reset-button.status-win:hover{background-color:#0000cc}#reset-button:active{transform:scale(0.95)}#board{display:grid;grid-template-columns:repeat(30,var(--cell-size));grid-template-rows:repeat(16,var(--cell-size));gap:0;background-color:#1a1a1a;border-top:1px solid #1a1a1a;border-left:1px solid #1a1a1a}.cell{width:var(--cell-size);height:var(--cell-size);background-color:#444444;border-right:1px solid #1a1a1a;border-bottom:1px solid #1a1a1a;box-sizing:border-box;cursor:pointer;display:flex;justify-content:center;align-items:center;font-weight:bold;font-size:var(--cell-font);color:#fff}.revealed{background-color:#222222;cursor:default}.num-1{color:#1976D2}.num-2{color:#388E3C}.num-3{color:#D32F2F}.num-4{color:#7B1FA2}.num-5{color:#FF9800}.num-6{color:#00BCD4}.num-7{color:#000}.num-8{color:#607D8B}.mine{background-color:#f44336 !important;color:#000;font-size:var(--cell-font)}.flag{color:#FFC107;font-size:var(--cell-font)}.incorrect-flag{background-color:#FF5722 !important;color:#fff}.cell:not(.revealed):hover{background-color:#5e5e5e}#volume-control-container{display:flex;align-items:center;gap:5px;width:100%;box-sizing:border-box;padding:5px 10px;background-color:#2b2b2b;border-radius:10px;box-shadow:0 6px 15px rgba(0,0,0,0.6)}.volume-icon{width:20px;height:20px;fill:#ccc;margin-right:5px;flex-shrink:0}#volume-percentage{font-family:'Consolas',monospace;width:40px;text-align:left;font-size:16px;cursor:default;color:#f0f0f0}#volume-slider{flex-grow:1;height:6px;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}#volume-slider::-webkit-slider-runnable-track{background:rgba(100,100,100,0.5);border-radius:3px;height:3px;border:1px solid rgba(255,255,255,0.2)}#volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-6.5px;background-color:#f0f0f0;height:14px;width:8px;border-radius:2px;box-shadow:0 1px 2px rgba(0,0,0,0.3)}#volume-slider::-moz-range-track{background:rgba(100,100,100,0.5);border-radius:3px;height:3px;border:1px solid rgba(255,255,255,0.2)}#volume-slider::-moz-range-thumb{background-color:#f0f0f0;height:14px;width:8px;border-radius:2px;border:none;box-shadow:0 1px 2px rgba(0,0,0,0.3)}#back-button{display:inline-block;padding:5px 0;background-color:#2b2b2b;color:#fff;text-decoration:none;border-radius:6px;font-weight:bold;box-shadow:0 2px 5px rgba(0,0,0,0.4);transition:background-color 0.2s,transform 0.1s;width:100%;box-sizing:border-box;text-align:center}#back-button:hover{background-color:#6a6a6a;transform:translateY(-1px)}#back-button:active{transform:scale(0.98)}#right-column{display:flex;flex-direction:column;align-items:stretch;gap:5px;width:270px;flex-grow:1}#stats-container{margin:0;width:100%;background-color:#2b2b2b;padding:5px;border-radius:10px;box-shadow:0 6px 15px rgba(0,0,0,0.6);display:flex;flex-direction:column;gap:2px;font-size:14px;box-sizing:border-box}#stats-container h3{margin-top:0;margin-bottom:2px;font-size:16px;color:#fff;padding-bottom:3px;border-bottom:1px solid #4f4f4f;text-align:center;display:block}.stat-item{padding:1px 5px;background-color:#3c3c3c;border-radius:4px;color:#fff;display:flex;justify-content:space-between;align-items:center;margin-bottom:0;font-size:13px}.stat-label{color:#ccc;font-weight:300}.stat-value-group{display:flex;align-items:center;gap:8px;font-weight:bold}.stat-value{font-weight:bold;color:#ffc107;min-width:30px;text-align:right}.stat-percentage{font-weight:normal;font-size:0.9em;width:50px;text-align:right}.stat-white-value{color:#fff}.stat-wins-value .stat-value,.stat-wins-value .stat-percentage{color:#38ff38}.stat-losses-value .stat-value,.stat-losses-value .stat-percentage{color:#ff3838}.best-time-value{color:#ffc107;font-weight:bold}.level-container{width:100%;background-color:#2b2b2b;padding:5px;border-radius:10px;box-shadow:0 6px 15px rgba(0,0,0,0.6);box-sizing:border-box}.level-container h3{margin-top:0;margin-bottom:2px;font-size:16px;color:#fff;padding-bottom:3px;border-bottom:1px solid #4f4f4f;text-align:center;display:block}.level-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px}.level-text{color:#fff;font-weight:bold;font-size:14px}.level-number{font-size:13px;font-weight:bold;transition:color 0.3s;background:none !important;border:none !important;padding:0 !important}.xp-bar-bg{width:100%;height:8px;background-color:#111;border-radius:4px;overflow:hidden;position:relative}.xp-bar-fill{height:100%;width:0%;transition:width 0.5s ease-out}.xp-text{font-size:11px;color:#aaa;text-align:right;margin-top:3px}#leaderboard-container{margin-top:0;width:100%;background-color:#2b2b2b;padding:5px;border-radius:10px;box-shadow:0 6px 15px rgba(0,0,0,0.6);box-sizing:border-box;flex-grow:0;display:flex;flex-direction:column}.lb-list::-webkit-scrollbar{width:8px}.lb-list::-webkit-scrollbar-track{background:#222;border-radius:4px}.lb-list::-webkit-scrollbar-thumb{background:#555;border-radius:4px}.lb-list::-webkit-scrollbar-thumb:hover{background:#777}#leaderboard-container h3{margin-top:0;margin-bottom:4px;font-size:16px;color:#fff;padding-bottom:5px;border-bottom:1px solid #4f4f4f;text-align:center;flex-shrink:0}.leaderboard-item{padding:0 4px;background-color:#3c3c3c;border-radius:4px;color:#fff;display:flex;align-items:center;margin-bottom:0;flex-shrink:0;min-height:15px;font-size:11px}.leaderboard-item:last-child{margin-bottom:0}.leaderboard-rank{width:18px;font-weight:bold;color:#ffc107;flex-shrink:0}.leaderboard-name{flex-grow:1;margin-left:2px;font-weight:300;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}.leaderboard-lvl{margin-right:2px;margin-left:auto;font-weight:bold;font-size:0.8em;font-style:italic;white-space:nowrap;flex-shrink:0}.leaderboard-time{font-weight:bold;color:#38ff38;flex-shrink:0;width:30px;text-align:right}.leaderboard-item.placeholder{background-color:transparent;color:transparent;box-shadow:none;pointer-events:none}#leaderboard-container p{flex-grow:1}#mode-toggle-container{display:flex;justify-content:space-around;margin:0;background:#2b2b2b;padding:5px;border-radius:8px;box-shadow:0 4px 10px rgba(0,0,0,0.5);width:100%;box-sizing:border-box;flex-direction:column;align-items:center}.mode-btn{background:transparent;border:none;color:#777;font-weight:bold;cursor:pointer;padding:5px 10px;border-radius:6px;transition:all 0.2s;flex:1}.mode-btn.active{background-color:#444;color:#fff;box-shadow:0 2px 4px rgba(0,0,0,0.3)}.lb-list{display:none;flex-direction:column;gap:1px;overflow-y:auto;height:160px;min-height:160px;padding-right:2px}.lb-list.active{display:flex}#chat-container{width:100%;background-color:#2b2b2b;border-top:1px solid #444;display:flex;flex-direction:column;flex:0 0 auto;min-height:0;height:auto;box-sizing:border-box}#chat-header{background-color:#333;padding:4px 10px;font-size:13px;color:#aaa;border-bottom:1px solid #444;display:flex;justify-content:space-between;align-items:center;flex-shrink:0}.chat-header-right{display:flex;align-items:center;gap:8px}#chat-connect-btn{font-size:10px;padding:2px 5px;margin-right:5px;cursor:pointer;background:#444;color:#bbb;border:1px solid #555;border-radius:3px;transition:background 0.2s}#chat-connect-btn:hover{background:#555}#fs-toggle-btn,#theater-toggle-btn{background:none;border:none;color:#777;cursor:pointer;padding:0 4px;font-size:14px;transition:color 0.2s;line-height:1}#fs-toggle-btn:hover,#theater-toggle-btn:hover{color:#fff}#chat-messages{flex-grow:0;height:90px;min-height:90px;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:4px;scroll-behavior:smooth}#chat-messages::-webkit-scrollbar{width:6px}#chat-messages::-webkit-scrollbar-track{background:#1a1a1a}#chat-messages::-webkit-scrollbar-thumb{background:#555;border-radius:3px}.chat-msg{font-size:12px;line-height:1.3;word-wrap:break-word}.chat-msg .chat-time{color:#666;font-size:10px;margin-right:4px}.chat-msg .chat-user{font-weight:bold;color:#00e5ff;margin-right:4px;cursor:pointer}.chat-msg .chat-text{color:#ddd}.chat-msg.msg-own .chat-user{color:#ffc107}.chat-system{color:#ff3838;font-style:italic;font-size:11px}#chat-input-area{display:flex;padding:5px;background-color:#2b2b2b;border-top:1px solid #444;flex-shrink:0;position:relative}#chat-input{flex-grow:1;background-color:#111;border:1px solid #444;color:#fff;padding:4px 8px;border-radius:3px;outline:none;font-family:inherit;font-size:12px}#chat-input:focus{border-color:#666}#chat-send-btn{margin-left:5px;background-color:#444;color:#fff;border:none;padding:0 10px;border-radius:6px;cursor:pointer;font-weight:bold;font-size:12px;transition:background 0.2s}#chat-send-btn:hover{background-color:#0099cc}#ascii-btn{margin-right:5px;margin-left:5px;background-color:#444;color:#fff;border:none;padding:0 8px;border-radius:3px;cursor:pointer;font-weight:bold;font-size:10px;transition:background 0.2s}#ascii-btn:hover{background-color:#666}#ascii-menu{position:absolute;bottom:100%;right:50px;background-color:#333;border:1px solid #555;border-radius:4px;padding:5px;display:none;flex-direction:column;gap:2px;z-index:150;box-shadow:0 4px 10px rgba(0,0,0,0.5);margin-bottom:5px}#ascii-menu.visible{display:flex}.ascii-item{padding:4px 8px;cursor:pointer;color:#ddd;font-size:12px;border-radius:2px;white-space:nowrap}.ascii-item:hover{background-color:#555;color:#fff}.level-footer{display:flex;justify-content:center;align-items:center;margin-top:3px}.level-username{font-size:13px;color:inherit;font-weight:bold}.level-footer .xp-text{margin-top:0}.diff-improved{display:block;margin-top:8px;color:#38ff38;font-weight:bold;font-size:0.9em;text-shadow:0 1px 2px rgba(0,0,0,1)}.diff-slower{display:block;margin-top:8px;color:#ff3838;font-weight:bold;font-size:0.9em;text-shadow:0 1px 2px rgba(0,0,0,1)}#fs-hint{position:absolute;top:20px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.6);color:#fff;padding:8px 16px;border-radius:20px;font-size:14px;pointer-events:none;opacity:0;transition:opacity 0.5s;z-index:200;backdrop-filter:blur(4px)}#fs-hint.visible{opacity:1}.lvl-tier-0{color:#888;text-shadow:0 0 3px rgba(136,136,136,0.6)}.xp-bar-fill.lvl-tier-0{background:linear-gradient(90deg,#444,#888)}.lvl-tier-1{color:#00e5ff;text-shadow:0 0 5px rgba(0,229,255,0.6)}.xp-bar-fill.lvl-tier-1{background:linear-gradient(90deg,#0099cc,#00e5ff)}.lvl-tier-2{color:#76ff03;text-shadow:0 0 6px rgba(118,255,3,0.6)}.xp-bar-fill.lvl-tier-2{background:linear-gradient(90deg,#4caf50,#76ff03)}.lvl-tier-3{color:#2979ff;text-shadow:0 0 7px rgba(41,121,255,0.7)}.xp-bar-fill.lvl-tier-3{background:linear-gradient(90deg,#1565c0,#2979ff)}.lvl-tier-4{color:#d500f9;text-shadow:0 0 8px rgba(213,0,249,0.7)}.xp-bar-fill.lvl-tier-4{background:linear-gradient(90deg,#aa00ff,#d500f9)}.lvl-tier-5{color:#ffea00;text-shadow:0 0 9px rgba(255,234,0,0.8)}.xp-bar-fill.lvl-tier-5{background:linear-gradient(90deg,#ffb300,#ffea00)}.lvl-tier-6{color:#ff3d00;text-shadow:0 0 10px rgba(255,61,0,0.8)}.xp-bar-fill.lvl-tier-6{background:linear-gradient(90deg,#e65100,#ff3d00)}.lvl-tier-7{color:#ff005c;text-shadow:0 0 12px rgba(255,0,92,0.9)}.xp-bar-fill.lvl-tier-7{background:linear-gradient(90deg,#c51162,#ff005c)}.lvl-tier-8{color:#ff00ff;text-shadow:0 0 15px rgba(255,0,255,0.8)}.xp-bar-fill.lvl-tier-8{background:linear-gradient(90deg,#aa00ff,#ff00ff)}.lvl-tier-9{color:#fff;text-shadow:0 0 15px #fff,0 0 25px #ff00de;animation:glow 1.5s infinite alternate}.xp-bar-fill.lvl-tier-9{background:linear-gradient(90deg,#ff00de,#fff)}@keyframes glow{from{text-shadow:0 0 10px #fff}to{text-shadow:0 0 25px #fff,0 0 35px #00e5ff}}.xp-gain{display:block;margin-top:8px;color:#ffd700;font-weight:bold;font-size:0.9em;text-shadow:0 1px 2px rgba(0,0,0,1)}#rank-display{font-size:11px;color:#fff;text-align:center;margin-bottom:2px;font-weight:bold;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#level-info-icon{display:inline-block;width:12px;height:12px;background:#444;border-radius:50%;text-align:center;line-height:12px;font-size:9px;color:#fff;cursor:help;margin-left:5px;position:relative}#level-info-icon:hover #level-tooltip{display:block;opacity:1}#level-tooltip{display:none;position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.95);border:1px solid #555;padding:8px;border-radius:6px;width:180px;z-index:999;box-shadow:0 4px 10px rgba(0,0,0,0.6);opacity:0;transition:opacity 0.2s;pointer-events:none;margin-bottom:5px}#level-tooltip h4{margin:0 0 5px 0;font-size:12px;color:#fff;text-align:center;border-bottom:1px solid #444;padding-bottom:3px}.rank-list-item{font-size:10px;display:flex;justify-content:space-between;margin-bottom:2px}.rank-list-item:last-child{margin-bottom:0}#mode-toggle-container h3{margin-top:0;margin-bottom:2px;font-size:16px;color:#fff;padding-bottom:3px;border-bottom:1px solid #4f4f4f;width:100%;text-align:center}

.safe-start{position:relative}.safe-start::after{content:'';position:absolute;width:8px;height:8px;background-color:#00ff00;border-radius:50%;pointer-events:none;box-shadow:0 0 5px #00ff00;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10}.shake-hint::after{animation:shake-dot 0.3s ease-in-out}@keyframes shake-dot{0%,100%{transform:translate(-50%,-50%)}25%{transform:translate(calc(-50% - 3px),-50%)}75%{transform:translate(calc(-50% + 3px),-50%)}}