/* Globale Stile, Text Shadow, Kategorie Button, Tooltip, Modal, Toast, Mosaik, Punkte-Popup, Achievement, Suggestion, Treasure Chest, Edit-Indicator */
body { scroll-behavior: smooth; position: relative; }
.text-shadow { text-shadow: 1px 1px 3px rgba(0,0,0,0.3); }
.text-shadow-sm { text-shadow: 1px 1px 2px rgba(0,0,0,0.2); }
.category-button { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.75rem 0.5rem; border: 2px solid transparent; border-radius: 0.5rem; background-color: #f3f4f6; cursor: pointer; transition: all 0.2s ease-in-out; text-align: center; font-size: 0.75rem; line-height: 1.1; min-height: 60px; }
.category-button:hover { border-color: #d1d5db; background-color: #e5e7eb; }
.category-button.active { border-color: #6366f1; background-color: #e0e7ff; color: #4338ca; font-weight: 600; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.category-button .points { font-size: 0.7rem; font-weight: bold; margin-top: 2px; opacity: 0.8; }
.info-tooltip:hover .tooltip-text { display: block; animation: fadeIn 0.2s ease-out; }
#item-modal, #achievements-modal, #treasure-chest-modal { transition: opacity 0.3s ease-out; }
#item-modal.visible, #achievements-modal.visible, #treasure-chest-modal.visible { opacity: 1; pointer-events: auto; }
#item-modal.visible > div, #achievements-modal.visible > div, #treasure-chest-modal.visible > div { transform: scale(1); }
#toast-message { position: fixed; bottom: -100px; left: 50%; transform: translateX(-50%); background: #22c55e; color: #fff; padding: 0.8rem 1.5rem; border-radius: 9999px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); z-index: 10000; font-weight: 600; text-align: center; opacity: 0; transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); display: flex; align-items: center; }
#toast-message.show { bottom: 2rem; opacity: 1; }
#toast-message.error { background-color: #ef4444; }
#toast-message.info { background-color: #3b82f6; }
.mosaic-tile { aspect-ratio: 1 / 1; background-size: cover; background-position: center; position: relative; cursor: default; transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; }
.mosaic-tile.filled { cursor: pointer; }
.mosaic-tile.filled:hover { transform: scale(1.15); box-shadow: 0 0 10px rgba(0,0,0,0.3); z-index: 10; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleUp { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.leader-crown { animation: bounceIn 1.2s ease-out forwards; }
#percent-alina, #percent-udo { text-shadow: 1px 1px 1px rgba(0,0,0,0.4); }
.achievement-card { border: 1px solid #e5e7eb; border-radius: 0.5rem; padding: 1rem; display: flex; align-items: center; background-color: #f9fafb; transition: all 0.2s ease-out; }
.achievement-card.unlocked { border-left: 4px solid #10b981; background-color: #f0fdf4; }
.achievement-card .icon { font-size: 2rem; margin-right: 1rem; }
.achievement-card .details h4 { font-weight: 600; }
.achievement-card .details p { font-size: 0.875rem; color: #6b7280; }
.achievement-card.unlocked .details p { color: #374151; }
.points-popup { position: absolute; z-index: 100; font-size: 1.2rem; font-weight: bold; color: #f59e0b; text-shadow: 1px 1px 1px rgba(0,0,0,0.2); padding: 2px 6px; border-radius: 4px; background-color: rgba(255, 255, 255, 0.6); white-space: nowrap; pointer-events: none; animation: pointsFly 1.5s ease-out forwards; }
.suggestion-card { border: 1px solid #e5e7eb; border-left: 4px solid #60a5fa; border-radius: 0.5rem; padding: 0.75rem; margin-bottom: 0.75rem; background-color: #eff6ff; }
.suggestion-card p { margin-bottom: 0.5rem; font-size: 0.875rem; }
.suggestion-actions button { font-size: 0.75rem; padding: 0.25rem 0.75rem; margin-right: 0.5rem; border-radius: 9999px; transition: background-color 0.2s ease; cursor: pointer; }
.suggestion-actions .accept-btn { background-color: #10b981; color: white; }
.suggestion-actions .accept-btn:hover { background-color: #059669; }
.suggestion-actions .reject-btn { background-color: #ef4444; color: white; }
.suggestion-actions .reject-btn:hover { background-color: #dc2626; }
.suggestion-actions .protect-btn { background-color: #a855f7; color: white; }
.suggestion-actions .protect-btn:hover { background-color: #9333ea; }
.suggestion-actions .protect-btn:disabled { background-color: #d8b4fe; cursor: not-allowed; opacity: 0.7; }
.treasure-item-card { display: flex; align-items: center; border: 1px solid #e5e7eb; border-radius: 0.5rem; padding: 0.75rem; background-color: #fafafa; }
.treasure-item-card img { width: 40px; height: 40px; object-fit: cover; border-radius: 0.25rem; margin-right: 0.75rem; background-color: #f3f4f6; }
.treasure-item-card .details { flex-grow: 1; }
.treasure-item-card .details span { font-size: 0.875rem; }
.treasure-item-card .details .date { font-size: 0.75rem; color: #6b7280; }
.treasure-item-card .player-tag { font-size: 0.7rem; padding: 0.1rem 0.4rem; border-radius: 9999px; margin-left: 0.5rem; }
.player-tag.alina { background-color: #fef3c7; color: #b45309; }
.player-tag.udo { background-color: #dcfce7; color: #166534; }
.edit-indicator { position: absolute; top: 0; left: 0; font-size: 0.6rem; line-height: 1; padding: 1px 2px; background-color: rgba(59, 130, 246, 0.8); color: white; border-bottom-right-radius: 3px; pointer-events: none; }