{{define "cardword"}}
{{if .Revealed}}
  {{if eq .Color "amber"}}
    <div id="card-{{.Word}}" class="bg-{{.Color}}-100 border border-gray-500 p-4 rounded-lg min-w-[100px] text-center text-white cursor-pointer" 
         style="text-shadow: 0 2px 4px rgba(0,0,0,0.9);"> {{.Word}}
    </div>
  {{else}}
    <div id="card-{{.Word}}" class="bg-{{.Color}}-400 border border-gray-500 p-4 rounded-lg min-w-[100px] text-center text-white cursor-pointer" 
         style="text-shadow: 0 2px 4px rgba(0,0,0,0.9);"> {{.Word}}
    </div>
  {{end}}
{{else}}
<div id="card-{{.Word}}" class="bg-stone-400 border border-gray-500 p-4 rounded-lg min-w-[100px] text-center text-white cursor-pointer" 
     style="text-shadow: 0 2px 4px rgba(0,0,0,0.8);"
     hx-get="/word/show-color?word={{.Word}}" hx-trigger="click" hx-swap="outerHTML transition:true swap:.05s">
    {{.Word}}
</div>
{{end}}
{{end}}