:root {--bg: #1a1a2e; --accent: #e94560; --text:#ffffff;}
* {box-sizing: border-box; --webkit-tap-highlight-color: transparent;}
body,html{margin:0;padding: 0;width: 100%;height: 100%;/*overflow: hidden;*/background: var(--bg); color: var(--text);font-family: system-ui,-apple-system,sans-serif;}

#game-container {position: relative; display: flex;flex-direction: column;align-items: center;width: 100%;height: 100vh;justify-content: space-between;padding-top: env(safe-area-inset-top);}

#header-area {width: 90%;max-width: 450px;padding-top: 20px;text-align: center;flex-shrink: 0;}
/* h1 {font-size: 2rem;margin: 0 0 15px 0;letter-spacing: 2px;font-weight: 800;height: 1.6rem;} */

#stats-bar {display: flex;justify-content: space-between;gap: 8px;margin-bottom: 12px;}
.stat-item {flex: 1;background: rgba(255, 255, 255, 0.1);backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);padding: 10px 5px;border-radius: 15px;border: 1px solid rgba(255, 255, 255, 0.1);display: flex;flex-direction: column;align-items: center;}
.label{font-size: 0.6rem; color:rgba(255, 255, 255, 0.4); margin-bottom: 4px;font-weight: bold;height: 0.8rem;}
.val{font-weight: 800;font-size: 1.1rem;}

#target-box {background: rgba(255, 255, 255, 0.05);padding: 10px;border-radius: 15px;border: 1px solid rgba(255, 255, 255, 0.05);}
#target-list {font-size:2rem;min-height: 2.2rem;display: flex;justify-content: center;gap:12px;margin-top: 5px;}

#grid {display: grid;gap:8px;margin: auto;padding:12px;border-radius: 24px;width: 88vw;max-width: 380px;aspect-ratio: 1/1;background: rgba(255, 255, 255, 0.03);border:2px solid rgba(255, 255, 255, 0.1);}
.face {cursor: pointer;display: flex;align-items: center;justify-content: center;aspect-ratio: 1/1;background: rgba(255, 255, 255, 0.08);border-radius: 12px;font-size: 2.2rem;user-select: none;}
.face:hover {background: rgba(255,255,255,0.15);}
.face:active {transform:scale(0.9);}

/* #footer-area {width: 100%;height: 140px; display: flex;flex-direction: column;align-items: center;justify-content: center;padding-bottom: calc(env(safe-area-inset-bottom) + 20px);gap: 18px;flex-shrink: 0;} */
#footer-area {margin-top:auto;padding-bottom: 15px;font-size: 0.7rem;color:#555;}
#footer-area a {color: #888; text-decoration: none; margin: 0 10px;}

.modal {display: none;position: fixed;inset: 0;background: rgba(0, 0, 0, 0.98); flex-direction: column;justify-content: center;align-items: center;z-index:100;text-align: center;padding: 30px;}
.desc {color: #bdc3c7; max-width: 300px;}
button {padding: 16px 40px;font-size: 1.1rem;background: var(--accent);color: white;border: none;border-radius: 50px;cursor: pointer;font-weight: bold;margin:10px;min-width: 220px;}

.history-list{display: flex;gap:8px;list-style: none;padding: 0;margin:15px 0;font-size: 0.9rem;}
.history-item{background: rgba(255,255,255,0.1); padding: 4px 12px; border-radius: 20px; color: #bdc3c7}

#privacy-modal div{max-width: 400px;text-align: left;font-size:0.9rem;line-height: 1.5;color:#ccc;}