* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    min-height: 100vh;
    display: flex; justify-content: center; align-items: center;
    background: var(--bg-color,#0d0d0d);
    color: var(--text-color,#fff);
    transition: background 0.5s, color 0.5s;
}

.container { width: 95%; max-width: 400px; padding: 20px; text-align: center; }

.top-bar { display:flex; justify-content: space-between; align-items:center; flex-wrap:wrap; }

header h1 { font-size: clamp(1.8rem,4vw,3rem); margin-bottom:10px; }

header p { font-size: clamp(1rem,2.5vw,1.5rem); color: var(--sub-text-color,#ddd); margin-bottom:10px; }

.mode-toggle { margin:10px 0;  }
.mode-toggle input { display:none; }
.mode-toggle span { cursor:pointer; font-size:1rem; padding:5px 10px; border-radius:10px; background: rgba(255,255,255,0.1); transition:0.3s; }
.mode-toggle span:hover { background: rgba(255,255,255,0.2); }

select { padding:5px 10px; border-radius:8px; border:none; font-size:1rem; }

.progress-bar { width:100%; height:20px; background: rgba(255,255,255,0.1); border-radius:15px; margin-bottom:25px; overflow:hidden; }
.progress-fill { height:100%; width:0%; background: linear-gradient(90deg,#00ff99,#00ccff); transition: width 0.5s ease; }

.list-container { display:grid; grid-template-columns: repeat(auto-fit,minmax(80px,1fr)); gap:15px; margin:30px 0; }

.card { background: rgba(255,255,255,0.05); padding:20px; border-radius:15px; font-weight:bold; font-size: clamp(1.2rem,3vw,2rem); cursor: default; box-shadow: 0 4px 15px rgba(0,0,0,0.5); border: 3px solid rgba(255,255,255,0.2); transition: transform 0.4s, border 0.4s, background 0.4s; }
.card.flip { transform: rotateY(360deg) scale(1.05); animation: bounce 0.6s; }
.card.ha { background: linear-gradient(135deg,#00ff99,#00cc77); color:#000; border:3px solid #00ff99; }
.card.yoq { background: linear-gradient(135deg,#ff4d4d,#cc0000); color:#000; border:3px solid #ff4d4d; }
.card:hover { transform: scale(1.05) translateY(-5px); border-color:#00ffcc; }

@keyframes bounce { 0%,20%,50%,80%,100%{transform: translateY(0);} 40%{transform: translateY(-15px);} 60%{transform: translateY(-7px);} }

.buttons button { padding: clamp(10px,2vw,18px) clamp(15px,3vw,30px); margin:8px; font-size: clamp(0.9rem,1.5vw,1.3rem); border:none; border-radius:12px; cursor:pointer; background:#00ff99; color:#000; transition:0.3s; }
.buttons button:hover { background:#00cc77; }

.result-popup { position: fixed; top:50%; left:50%; transform: translate(-50%,-50%) scale(0); background: rgba(0,0,0,0.9); padding: clamp(15px,3vw,40px); border-radius:20px; text-align:center; box-shadow:0 0 40px rgba(0,0,0,0.7); transition: transform 0.5s ease; z-index:100; }
.result-popup.show { transform: translate(-50%,-50%) scale(1); }
.result-popup span { font-size: clamp(1.8rem,4vw,2.5rem); font-weight:bold; color:#ffea00; display:block; margin-bottom:15px; }
.result-popup button { padding: clamp(10px,2vw,14px) clamp(20px,3vw,30px); font-size: clamp(0.9rem,1.5vw,1.3rem); border-radius:12px; border:none; cursor:pointer; background:#ff4d4d; color:#000; }
.result-popup button:hover { background:#cc0000; }

.history { margin-top:25px; text-align:left; max-width:480px; margin-left:auto; margin-right:auto; }
.history h3 { font-size: clamp(1rem,2vw,1.3rem); margin-bottom:8px; }
.history ul { list-style:none; max-height:180px; overflow-y:auto; padding-left:10px; }

body.light-mode { --bg-color: linear-gradient(135deg,#ffffff,#cccccc); --text-color:#000; --sub-text-color:#333; }
body.dark-mode { --bg-color:#0d0d0d; --text-color:#fff; --sub-text-color:#ddd; }

.both {
  clear: both;
}