* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; color: #e5e5e5; background: #1C1C1C; }
header { position: sticky; top: 0; display: flex; align-items: stretch; justify-content: space-between; padding: 0 16px; background: #464D06; color: white; z-index: 10; height: 56px; }
header h1 { margin: 0; font-size: 18px; letter-spacing: 0.5px; display: flex; align-items: center; }
header h1 img { height: 100%; width: auto; object-fit: contain; }
header .row { align-items: center; }

main { padding: 12px 16px 80px; display: grid; gap: 18px; }
section h2 { margin: 8px 0; font-size: 16px; color: #e5e5e5; }
label { display: grid; gap: 6px; font-size: 14px; color: #999; }
input[type="text"] { padding: 10px 12px; border: 1px solid #444; border-radius: 10px; background: #2a2a2a; font-size: 16px; color: #e5e5e5; }
.row { display: flex; gap: 8px; align-items: center; }

#optionList { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.option { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 10px; background: #2a2a2a; border: 1px solid #444; }
.option button { border: none; padding: 6px 10px; border-radius: 8px; background: #444; color: #e5e5e5; cursor: pointer; }
.option.active { outline: 2px solid #EE4644; }

.pad-triangle { 
  width: 100%; 
  max-width: 400px; 
  aspect-ratio: 1.155 / 1; 
  background: #464D06;
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
  position: relative; 
  touch-action: none;
}
.marker { position: absolute; width: 14px; height: 14px; background: #EE4644; border: 2px solid white; border-radius: 999px; box-shadow: 0 1px 4px rgba(0,0,0,.2); transform: translate(-50%, -50%); pointer-events: none; }
.hint { color: #999; font-size: 13px; margin: 0 0 8px; }

#voteFor { margin-top: 8px; font-size: 14px; color: #e5e5e5; }

#results { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.result { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; padding: 10px 12px; border-radius: 10px; background: #2a2a2a; border: 1px solid #444; }
.result .label { font-weight: 600; }
.result .meta { color: #999; font-size: 12px; grid-column: 1 / -1; }

footer { position: sticky; bottom: 0; background: #1C1C1C; color: #666; padding: 12px 16px; text-align: center; border-top: 1px solid #333; }

@keyframes slideIn {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes pulse {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }
  50% { transform: translate(-50%, -50%) scale(2.5); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }
}