*{margin:0;padding:0;box-sizing:border-box}
body{background:#0e1621;display:flex;justify-content:center;align-items:center;min-height:100vh;min-height:100dvh;font-family:"Microsoft YaHei",sans-serif;color:#c7d5e0;padding:12px}
#app{width:100%;max-width:640px;background:#1b2838;border:1px solid #2a475e;border-radius:6px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:12px}
.header{width:100%;display:flex;justify-content:space-between;align-items:center}
.title{font-size:clamp(14px,4vw,18px);color:#66c0f4;font-weight:700;letter-spacing:1px}
.timer{font-size:clamp(22px,6vw,28px);font-weight:700;color:#afafaf;min-width:36px;text-align:right;font-variant-numeric:tabular-nums}
.timer.warn{color:#e74c3c;animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.info{width:100%;display:flex;justify-content:space-between;font-size:clamp(11px,2.8vw,13px);color:#8f98a0;padding:0 2px;flex-wrap:wrap;gap:4px 8px}
.streak{color:#f0ad4e;font-weight:700}
.grid-wrap{width:100%;display:flex;justify-content:center;overflow:hidden;border-radius:4px}
.grid{display:grid;position:relative;background:#16202d}
.cell{position:relative;z-index:1;overflow:hidden;cursor:pointer;background:#16202d;border:3px solid transparent;transition:border-color .12s,transform .15s}
.cell:hover{border-color:#3a6f9f;transform:scale(1.04);z-index:5}
.cell.hit{border-color:#66c0f4;box-shadow:0 0 12px rgba(102,192,244,.35)}
.cell.sneaky{z-index:0;transition:transform .25s ease,border-color .12s,box-shadow .12s}
.cell.sneaky:hover{z-index:10;transform:none!important;border-color:#3a6f9f}
.cell.sneaky.hit{z-index:10;transform:none!important;border-color:#66c0f4;box-shadow:0 0 12px rgba(102,192,244,.35)}
.cell img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-drag:none}
#submit{width:100%;padding:12px;background:linear-gradient(135deg,#47bfff 0%,#1a44c2 100%);color:#fff;border:none;border-radius:4px;font-size:clamp(13px,3.5vw,15px);font-weight:700;cursor:pointer;letter-spacing:3px;transition:opacity .2s}
#submit:disabled{opacity:.3;cursor:not-allowed}
#submit:not(:disabled):hover{opacity:.85}
@media(hover:none){.cell:hover{border-color:transparent;transform:none;z-index:1}.cell.sneaky:hover{transform:translate(40%,40%)!important;border-color:transparent;z-index:0}}