:root{
      --bg:#0b0f14; --card:#111823; --muted:#93a0b0; --text:#e6eef8; --accent:#57e39a; --danger:#ff6174; --warn:#ffd166;
      --tile:#141c28; --tile-hover:#1b2433; --tile-win:#0f2a1c; --tile-lose:#2a0f16; --outline:#1f2a3a; --shadow:0 10px 25px rgba(0,0,0,.35);
      --success:#2ecc71; --success2:#27ae60; --info:#56ccf2; --info2:#2f80ed;
    }
    *{box-sizing:border-box}
    body{margin:0;background:radial-gradient(1200px 600px at 70% -10%, #112, transparent),var(--bg);color:var(--text);font:500 16px/1.4 system-ui,Segoe UI,Roboto,Ubuntu,Inter,sans-serif;}
    
    /* Splash Screen Styles */
    #splash-screen {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: radial-gradient(1200px 600px at 70% -10%, #112, transparent),var(--bg);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      z-index: 1000;
      transition: opacity 0.5s ease;
    }
    
    #splash-screen.hidden {
      opacity: 0;
      pointer-events: none;
    }
    
    .splash-logo {
      width: 150px;
      height: 150px;
      display: grid;
      place-items: center;
      border-radius: 30px;
      
      box-shadow: var(--shadow);
      font-size: 60px;
      margin-bottom: 40px;
       margin-right: 50px;
      animation: pulse 2s infinite;
    }
    
    .splash-title {
      font-size: 32px;
      font-weight: 800;
      margin-bottom: 10px;
      background: linear-gradient(135deg,#1f8,#58f);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    
    .splash-subtitle {
      color: var(--muted);
      margin-bottom: 40px;
      text-align: center;
      max-width: 300px;
    }
    
    
    .play-btn {
      position: relative;
      padding: 16px 50px;
      border-radius: 50px;
      background: linear-gradient(135deg,#24d07a,#1da0ff);
      color: white;
      font-weight: 800;
      font-size: 18px;
      border: none;
      cursor: pointer;
      overflow: hidden;
      box-shadow: 0 10px 25px rgba(0,0,0,0.2);
      transition: transform 0.3s, box-shadow 0.3s;
    }
    
    .play-btn:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 30px rgba(0,0,0,0.3);
    }
    
    .play-btn::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(
        to bottom right,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.1) 45%,
        rgba(255,255,255,0.1) 55%,
        rgba(255,255,255,0) 100%
      );
      transform: rotate(30deg);
      animation: shine 3s infinite;
    }
    
    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.05); }
      100% { transform: scale(1); }
    }
    
    @keyframes shine {
      0% { left: -50%; }
      100% { left: 150%; }
    }
    
    /* Main Game Styles */
    .wrap{max-width:1100px;margin:24px auto;padding:16px; display: none;}
    header{display:flex;gap:16px;align-items:center;justify-content:space-between;margin-bottom:16px}
    .brand{display:flex;gap:12px;align-items:center}
    .logo{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,#1f8,#58f);box-shadow:var(--shadow);font-weight:800}
    .brand h1{font-size:20px;margin:0}
    .card{background:linear-gradient(180deg,rgba(255,255,255,.02),transparent),var(--card);border:1px solid var(--outline);border-radius:16px;box-shadow:var(--shadow)}
    .grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;padding:14px}
    .tile{aspect-ratio:1;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.03),transparent),var(--tile);border:1px solid var(--outline);display:grid;place-items:center;cursor:pointer;user-select:none;font-weight:800;letter-spacing:.3px;transition:.15s transform,.15s background,.2s border-color;font-size:40px}
    .tile:hover{background:var(--tile-hover);transform:translateY(-1px)}
    .tile.revealed.safe{background:var(--tile-win);border-color:#1f6441}
    .tile.revealed.mine{background:var(--tile-lose);border-color:#7a1f2e}
    .tile.revealed{cursor:default}
    .panel{display:grid;grid-template-columns:1.1fr .9fr;gap:16px}
    @media (max-width:900px){.panel{grid-template-columns:1fr}}
    .controls{padding:16px;display:grid;gap:14px}
    .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
    .stack{display:grid;gap:8px}
    label{font-size:12px;color:var(--muted)}
    input[type="number"], input[type="text"], .out{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--outline);background:#0f1520;color:var(--text)}
    input[type="range"]{width:100%}
    .btn{padding:12px 16px;border-radius:12px;border:1px solid var(--outline);background:#101826;color:var(--text);font-weight:700;cursor:pointer;transition:.15s transform,.15s background}
    .btn:hover{transform:translateY(-1px);background:#0f1622}
    .btn.primary{background:linear-gradient(135deg,#24d07a,#1da0ff);border:none}
    .btn.danger{background:linear-gradient(135deg,#ff6174,#ff9a8f);border:none}
    .btn.success{background:linear-gradient(135deg,var(--success),var(--success2));border:none}
    .btn.info{background:linear-gradient(135deg,var(--info),var(--info2));border:none}
    .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:12px;border-top:1px dashed var(--outline)}
    .kpi{background:rgba(255,255,255,.02);border:1px solid var(--outline);border-radius:12px;padding:10px}
    .kpi .v{font-weight:800;font-size:18px}
    .muted{color:var(--muted)}
    footer{margin-top:18px;color:var(--muted);font-size:13px}
    .toast{position:fixed;right:16px;bottom:16px;background:#0f1520;border:1px solid var(--outline);padding:12px 14px;border-radius:12px;box-shadow:var(--shadow);opacity:0;transform:translateY(10px);transition:.25s;pointer-events:none}
    .toast.show{opacity:1;transform:translateY(0)}
    .chip{display:inline-block;padding:6px 10px;border-radius:999px;background:#0e1a28;border:1px solid var(--outline);font-size:12px}
    .row.auto{grid-template-columns:1fr auto}
    .small{font-size:12px;color:var(--muted)}
    .tile.revealed img {
  width: 65%;
  height: 65%;
  object-fit: contain;
  pointer-events: none;
}