:root{--ink:#111;--muted:#666;--accent:#0d6efd;--bad:#c92a2a}
*{box-sizing:border-box}
body{margin:0;background:#fff;color:var(--ink);font:500 16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial;display:flex;flex-direction:column;min-height:100vh;padding-top:60px}
/* Page Header */
.page-header{background:#f8f9fa;border-bottom:1px solid #e5e7eb;padding:12px 0;margin-bottom:20px}
.page-header .container{width:min(95vw,1200px);margin:0 auto;padding:0 16px;display:flex;align-items:center;justify-content:space-between}
.page-logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.page-logo img{height:32px;width:auto}
.page-logo h1{font-size:20px;margin:0;font-weight:600}

/* Game Container */
.container{width:min(95vw,1200px);margin:0 auto;padding:16px;flex:1}

/* Footer */
#footer-container{margin-top:auto}
.game-header{display:flex;justify-content:center;margin-bottom:16px}
.pill{background:#fff;border:1px solid #e5e7eb;border-radius:999px;padding:6px 10px;color:var(--muted);font-size:16px;transition:all 0.2s ease;cursor:pointer;display:inline-block}
.pill:hover{background:#f8f9fa;transform:translateY(-1px)}
.pill:active{transform:translateY(0)}
.pill.disabled{background:#f8f9fa;border-color:#e5e7eb;color:#9ca3af;cursor:not-allowed;opacity:0.6}
.pill.disabled:hover{background:#f8f9fa;transform:none}

.language-selector{position:relative;display:inline-block}
.language-selector select{background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:6px 12px;font-size:14px;color:var(--ink);cursor:pointer;outline:none;appearance:none;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");background-position:right 8px center;background-repeat:no-repeat;background-size:16px;padding-right:32px;padding-left:32px}
.language-selector select:hover{border-color:#9ca3af}
.language-selector select:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(13,110,253,0.1)}


.grid{display:grid;grid-template-columns:1fr;gap:12px}
.stage{display:flex;align-items:center;justify-content:center;min-height:180px;position:relative}
#hangmanSvg{width:100%;max-width:300px;height:auto;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.1))}
#hangmanSvg line,#hangmanSvg circle,#hangmanSvg path{stroke-linecap:round;stroke-linejoin:round}
.placeholder{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:18px;color:#777;text-align:center;padding:0 20px}

.panel{display:flex;flex-direction:column;align-items:center}
.word{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:8px;margin-bottom:16px}
.letter{width:36px;height:46px;border-bottom:2px solid #999;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800}

.stats{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:8px 0 4px}
.stat{padding:6px 10px;border-radius:999px;background:#fff;border:1px solid #e5e7eb;font-size:15px}
.stat.lives{border-color:#ef4444;border-width:2px}
.stat.lives .heart{color:#ef4444;font-size:18px;margin-right:4px}
.stat.wrong{border-color:#ef4444;border-width:2px}
.stat.score{border-color:#10b981;border-width:2px}

.kb{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px;width:100%;max-width:450px;justify-content:center;padding-top:16px}
.kb button{padding:10px 6px;border:1px solid #ddd;border-radius:6px;background:#fff;color:var(--ink);cursor:pointer;font-size:18px;font-weight:700;min-height:44px;width:44px;flex-shrink:0}
.kb button:hover{background:#f8f9fa}
.kb button[disabled]{opacity:.35;cursor:not-allowed}
.kb .good{background:#d3f9d8;border-color:#b2f2bb}
.kb .bad{background:#ffe3e3;border-color:#ffa8a8}

.controls{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:20px;align-items:center;padding:0 8px}
.btn{padding:10px 16px;border-radius:12px;border:2px solid;background:linear-gradient(145deg, #ffffff, #f0f0f0);color:var(--ink);cursor:pointer;font-size:15px;font-weight:600;height:44px;display:flex;align-items:center;justify-content:center;transition:all 0.3s ease;white-space:nowrap;flex-shrink:0;box-shadow:0 4px 8px rgba(0,0,0,0.1);text-transform:uppercase;letter-spacing:0.5px}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 12px rgba(0,0,0,0.15)}
.btn:active{transform:translateY(0);box-shadow:0 2px 4px rgba(0,0,0,0.1)}

/* Button color variants - Game Style */
.btn.buy{background:linear-gradient(145deg, #ffd700, #ffed4e);border-color:#ffc107;color:#8b4513;box-shadow:0 4px 8px rgba(255,193,7,0.3)}
.btn.buy:hover{background:linear-gradient(145deg, #ffed4e, #ffd700);box-shadow:0 6px 12px rgba(255,193,7,0.4)}

.btn.hint{background:linear-gradient(145deg, #4fc3f7, #29b6f6);border-color:#0288d1;color:#fff;box-shadow:0 4px 8px rgba(2,136,209,0.3)}
.btn.hint:hover{background:linear-gradient(145deg, #29b6f6, #0288d1);box-shadow:0 6px 12px rgba(2,136,209,0.4)}

.btn.reveal{background:linear-gradient(145deg, #ff5722, #f44336);border-color:#d32f2f;color:#fff;box-shadow:0 4px 8px rgba(244,67,54,0.3)}
.btn.reveal:hover{background:linear-gradient(145deg, #f44336, #d32f2f);box-shadow:0 6px 12px rgba(244,67,54,0.4)}

.btn.new{background:linear-gradient(145deg, #4caf50, #388e3c);border-color:#2e7d32;color:#fff;box-shadow:0 4px 8px rgba(76,175,80,0.3)}
.btn.new:hover{background:linear-gradient(145deg, #388e3c, #2e7d32);box-shadow:0 6px 12px rgba(76,175,80,0.4)}

.btn.disabled{background:#f8f9fa;border-color:#e5e7eb;color:#9ca3af;cursor:not-allowed;opacity:0.6}
.btn.disabled:hover{background:#f8f9fa;transform:none}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;padding:16px}
.modal.show{display:flex}
.modal .box{background:#fff;padding:16px 18px;border-radius:12px;max-width:90vw;width:400px;text-align:center;display:flex;flex-direction:column;align-items:center}
.game-result{font-size:64px;margin-bottom:16px;display:block}
.share-buttons{display:flex;gap:8px;margin:16px 0;justify-content:center;flex-wrap:wrap}
.share-btn{padding:10px;border-radius:50%;border:none;background:#fff;color:var(--ink);cursor:pointer;font-size:16px;font-weight:500;transition:all 0.2s ease;display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin:0 auto;position:relative}
.share-btn:hover{transform:translateY(-1px);box-shadow:0 4px 8px rgba(0,0,0,0.1)}
.share-btn:active{transform:translateY(0)}

#again{margin-top:16px;width:auto;min-width:120px}

/* Game Result Area */
.game-result-area{
  background: linear-gradient(145deg, #f8f9fa, #e9ecef);
  border: 2px solid #dee2e6;
  border-radius: 12px;
  padding: 12px;
  margin-top: 16px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  animation: resultSlideIn 0.3s ease-out;
  width: 100%;
  max-width: 450px;
  margin-left: auto;
  margin-right: auto;
}

@keyframes resultSlideIn {
  from { 
    opacity: 0; 
    transform: translateY(10px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

.result-content{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.result-title{
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}

.result-details{
  display: flex;
  flex-direction: row;
  gap: 16px;
  justify-content: center;
  margin: 2px 0;
}

.result-details p{
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

.result-word, .result-score{
  font-weight: 700;
  color: var(--ink);
  font-size: 16px;
}

.result-actions{
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  margin-top: 4px;
}

.play-again-btn, .share-result-btn{
  width: auto;
  min-width: 100px;
  padding: 8px 16px;
  font-size: 13px;
  height: 36px;
}

.share-result-btn{
  background: linear-gradient(145deg, #6b7280, #4b5563);
  border-color: #4b5563;
  color: #fff;
}

.share-result-btn:hover{
  background: linear-gradient(145deg, #4b5563, #374151);
  box-shadow: 0 6px 12px rgba(107, 114, 128, 0.4);
}

/* Tooltip styles */
.share-btn[title]:hover::after,
.share-option[title]:hover::after {
  content: attr(title);
  position: absolute;
  bottom: -35px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  animation: tooltipFadeIn 0.2s ease forwards;
}

@keyframes tooltipFadeIn {
  from { opacity: 0; transform: translateX(-50%) translateY(5px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.share-btn.facebook{background:#1877f2;color:#fff;border-color:#1877f2}
.share-btn.facebook:hover{background:#166fe5}

.share-btn.twitter{background:#1da1f2;color:#fff;border-color:#1da1f2}
.share-btn.twitter:hover{background:#1a91da}

.share-btn.linkedin{background:#0077b5;color:#fff;border-color:#0077b5}
.share-btn.linkedin:hover{background:#006ba1}

.share-btn.whatsapp{background:#25d366;color:#fff;border-color:#25d366}
.share-btn.whatsapp:hover{background:#22c55e}

.share-btn.telegram{background:#0088cc;color:#fff;border-color:#0088cc}
.share-btn.telegram:hover{background:#0077b3}

.share-btn.copy{background:#6b7280;color:#fff;border-color:#6b7280}
.share-btn.copy:hover{background:#5a6169}

.page-share{position:fixed;bottom:0;left:0;right:0;z-index:100;padding:8px;text-align:center;background:rgba(248,249,250,0.95);backdrop-filter:blur(10px);border-top:1px solid #e5e7eb}
.share-main-btn{background:#0d6efd;color:#fff;border:none;border-radius:20px;padding:8px 16px;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.2s ease;box-shadow:0 2px 8px rgba(0,0,0,0.1)}
.share-main-btn:hover{background:#0b5ed7;transform:translateY(-1px)}
.share-main-btn:active{transform:translateY(0)}

.share-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);display:none;align-items:center;justify-content:center;z-index:1000;padding:16px}
.share-modal.show{display:flex}
.share-modal-content{background:#fff;border-radius:12px;padding:24px;text-align:center;max-width:400px;width:100%;box-shadow:0 20px 25px -5px rgba(0,0,0,0.1)}
.share-modal-content h3{margin:0 0 20px;font-size:20px;font-weight:600;color:var(--ink)}
.share-options{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:20px;justify-content:center}
.share-option{padding:12px;border-radius:50%;border:none;cursor:pointer;font-size:18px;font-weight:500;transition:all 0.2s ease;display:flex;align-items:center;justify-content:center;width:48px;height:48px;margin:0 auto;position:relative}
.share-option:hover{transform:translateY(-1px);box-shadow:0 4px 8px rgba(0,0,0,0.1)}
.share-option.facebook{background:#1877f2;color:#fff}
.share-option.twitter{background:#1da1f2;color:#fff}
.share-option.linkedin{background:#0077b5;color:#fff}
.share-option.whatsapp{background:#25d366;color:#fff}
.share-option.telegram{background:#0088cc;color:#fff}
.share-option.copy{background:#6b7280;color:#fff}
.share-cancel{background:#f8f9fa;color:#6b7280;border:1px solid #e5e7eb;border-radius:8px;padding:10px 20px;font-size:14px;cursor:pointer;transition:all 0.2s ease}
.share-cancel:hover{background:#e9ecef}

/* Mobile specific improvements */
@media (min-width: 768px) {
  .container{padding:24px}
  .grid{grid-template-columns:1.1fr .9fr;gap:24px}
  .stage{min-height:340px}
  svg{max-width:560px}
  .placeholder{font-size:20px}
  .word{gap:12px;margin-top:10px;margin-bottom:20px}
  .letter{width:40px;height:52px;font-size:28px;border-bottom-width:3px}
  .stats{gap:14px;margin:10px 0 6px}
  .stat{padding:8px 12px;font-size:16px}
  .kb{gap:6px;margin-top:14px;max-width:400px;padding-top:12px}
  .kb button{padding:12px;font-size:20px;min-height:auto;width:44px}
  .controls{gap:6px;margin-top:18px;flex-wrap:wrap;padding:0 8px}
  .btn{padding:12px 16px;font-size:16px;height:48px;white-space:nowrap;flex-shrink:0;border-radius:14px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px}
  .modal .box{padding:20px 22px;max-width:420px;width:auto;display:flex;flex-direction:column;align-items:center}
  .page-share{padding:12px}
  .share-main-btn{padding:10px 20px;font-size:16px}
}

@media (max-width: 480px) {
  .container{padding:8px}
  header{margin-bottom:6px;gap:6px}
  h1{font-size:16px}
  .pill{padding:6px 8px;font-size:14px}
  .stage{min-height:120px}
  svg{max-width:200px}
  .placeholder{font-size:16px;padding:0 12px}
  .word{gap:4px;margin-top:6px;margin-bottom:12px}
  .letter{width:28px;height:34px;font-size:20px}
  .stats{gap:4px;margin:4px 0 2px}
  .stat{padding:6px 8px;font-size:14px}
  .kb{gap:4px;margin-top:6px;max-width:360px;padding-top:8px}
  .kb button{padding:8px 4px;font-size:16px;min-height:36px;width:36px}
  .controls{gap:4px;margin-top:12px;flex-wrap:wrap;padding:0 4px}
  .btn{padding:10px 12px;font-size:14px;height:40px;white-space:nowrap;flex-shrink:0;border-radius:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.3px}
  .modal .box{padding:10px 12px;max-width:95vw;display:flex;flex-direction:column;align-items:center}
  .page-share{padding:6px}
  .share-main-btn{padding:6px 12px;font-size:12px}
  .share-modal-content{padding:20px;max-width:350px}
  .share-options{grid-template-columns:repeat(3,1fr);gap:8px}
  .share-option{padding:10px;font-size:16px;width:40px;height:40px}
  
  /* Game Result Area Mobile */
  .game-result-area{padding:8px;margin-top:12px;max-width:360px}
  .result-title{font-size:16px;gap:6px}
  .result-details{flex-direction:row;gap:12px}
  .result-details p{font-size:12px}
  .result-word, .result-score{font-size:14px}
  .result-actions{flex-direction:row;gap:6px}
  .play-again-btn, .share-result-btn{min-width:80px;padding:6px 12px;font-size:12px;height:32px}
  
  /* Mobile Share */
  .page-share{display:none}
  .mobile-share-icon{display:flex}
}

/* Mobile Share Icon */
.mobile-share-icon{
  position: fixed;
  top: 20px;
  right: 20px;
  width: 48px;
  height: 48px;
  background: #6b7280;
  color: white;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 100;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: all 0.2s ease;
}

/* Desktop - hide mobile share icon */
@media (min-width: 769px) {
  .mobile-share-icon{display:none}
}

.mobile-share-icon:hover{
  background: #4b5563;
  transform: scale(1.1);
}

.mobile-share-icon i{
  font-size: 18px;
}

/* Touch improvements */
@media (hover: none) {
  .kb button:hover{background:#fff}
  .btn:hover{background:#fff}
  .kb button:active{background:#f0f0f0}
  .btn:active{background:#f0f0f0}
}