:root{--color-bg: #f3f4f6;--color-surface: #ffffff;--color-text-main: #1f2937;--color-text-muted: #6b7280;--color-heads: #10b981;--color-tails: #ef4444;--radius-lg: 24px;--radius-md: 12px;--radius-sm: 8px;--shadow-soft: 0 10px 40px -10px rgba(0, 0, 0, .08)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,system-ui,-apple-system,sans-serif;background-color:var(--color-bg);color:var(--color-text-main);min-height:100vh;display:flex;justify-content:center;align-items:center;padding:20px}.app-card{background:var(--color-surface);width:100%;max-width:900px;border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);overflow:hidden;display:grid;grid-template-columns:1fr 400px;min-height:600px}.game-section{padding:4rem 3rem;display:flex;flex-direction:column;align-items:center;justify-content:center;border-right:1px solid #e5e7eb}.header{text-align:center;margin-bottom:3rem}.header h1{font-size:2rem;font-weight:800;letter-spacing:-.03em}.header p{color:var(--color-text-muted);margin-top:.5rem}.coin-stage{perspective:1000px;margin-bottom:1.5rem}.coin{width:200px;height:200px;position:relative;transform-style:preserve-3d;cursor:pointer;transition:transform .3s ease}.face{position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:4rem;font-weight:700;color:#fff;box-shadow:inset 0 0 20px #0003,0 10px 20px #00000026}.face.front{background:linear-gradient(135deg,var(--color-heads),#059669);transform:rotateY(0)}.face.back{background:linear-gradient(135deg,var(--color-tails),#dc2626);transform:rotateY(180deg)}.coin:hover:not(.is-flipping){transform:translateY(-5px) scale(1.02)}.is-flipping{cursor:not-allowed}@keyframes spin-heads{0%{transform:rotateY(0)}to{transform:rotateY(1800deg)}}@keyframes spin-tails{0%{transform:rotateY(0)}to{transform:rotateY(1980deg)}}.result-text{height:2.5rem;margin-bottom:2rem;font-size:1.5rem;font-weight:700;opacity:0;transform:translateY(10px);transition:all .3s}.result-text.visible{opacity:1;transform:translateY(0)}.text-heads{color:var(--color-heads)}.text-tails{color:var(--color-tails)}.btn{padding:14px 40px;border-radius:var(--radius-md);border:none;font-weight:600;cursor:pointer;transition:all .2s;font-size:1rem;background:var(--color-text-main);color:#fff}.btn:hover{transform:translateY(-2px);background:#000}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.sidebar{background:#f9fafb;padding:3rem 2.5rem;display:flex;flex-direction:column;gap:2.5rem}.stats-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.25rem;text-align:center;background:#fff;padding:2rem 1.5rem;border-radius:var(--radius-md);border:1px solid #e5e7eb}.stat-value{font-size:1.75rem;font-weight:700;display:block}.stat-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);font-weight:600;margin-top:6px}.history-container{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}.history-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;padding-bottom:1rem;border-bottom:2px solid #e5e7eb}.history-title{font-size:.875rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-main)}.btn-reset{background:none;border:none;color:var(--color-text-muted);cursor:pointer;font-size:.8rem;padding:4px 8px;border-radius:4px;transition:all .2s}.btn-reset:hover{color:var(--color-tails);background:#ef44441a}.timeline-scroll{flex:1;overflow-y:auto;overflow-x:hidden;min-height:0;max-height:100%;padding-right:8px;scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}.timeline-scroll::-webkit-scrollbar{width:6px}.timeline-scroll::-webkit-scrollbar-track{background:transparent}.timeline-scroll::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.timeline{display:flex;flex-direction:column;gap:10px;padding-left:8px}.timeline-item{position:relative;padding-left:2.5rem;animation:slideIn .3s ease-out}.timeline-item:before{content:"";position:absolute;left:14px;top:30px;bottom:-10px;width:2px;background:#e5e7eb}.timeline-item:last-child:before{display:none}.timeline-marker{position:absolute;left:7px;top:12px;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid #cbd5e1;z-index:2}.timeline-item.heads .timeline-marker{border-color:var(--color-heads);background-color:var(--color-heads);box-shadow:0 0 0 4px #10b9811f}.timeline-item.tails .timeline-marker{border-color:var(--color-tails);background-color:var(--color-tails);box-shadow:0 0 0 4px #ef44441f}.timeline-content{background:#fff;padding:.875rem 1.125rem;border-radius:var(--radius-sm);border-left:3px solid #f3f4f6;box-shadow:0 1px 3px #00000014;display:flex;justify-content:space-between;align-items:center;gap:1rem;transition:all .2s ease}.timeline-item.heads .timeline-content{border-left-color:var(--color-heads);background:linear-gradient(to right,#10b9810a,#fff)}.timeline-item.tails .timeline-content{border-left-color:var(--color-tails);background:linear-gradient(to right,#ef44440a,#fff)}.timeline-content:hover{transform:translate(3px);box-shadow:0 2px 6px #0000001f}.timeline-left{display:flex;align-items:center;gap:.75rem}.t-count{font-size:.75rem;color:#9ca3af;font-weight:600;min-width:30px}.t-result{font-weight:700;font-size:.95rem;min-width:60px}.heads .t-result{color:var(--color-heads)}.tails .t-result{color:var(--color-tails)}.t-time{font-size:.8rem;color:var(--color-text-muted);font-family:Courier New,monospace;font-weight:500}.empty-state{text-align:center;color:var(--color-text-muted);font-size:.875rem;padding:4rem 1.5rem;font-style:italic;line-height:1.6}@keyframes slideIn{0%{opacity:0;transform:translate(-10px)}to{opacity:1;transform:translate(0)}}@media(max-width:768px){.app-card{grid-template-columns:1fr;min-height:auto}.game-section{border-right:none;border-bottom:1px solid #e5e7eb;padding:2rem}.sidebar{padding:2rem 1.5rem}}