:root{
        --bg:#F0F0F0; /* outer green like photo */
        --panel:#d8d1c4; /* outer panel frame */
        --paper:#fafafa; /* ballot paper */
        --btn:#072b4f; /* deep blue button */
        --btn-shadow: rgba(2,10,26,0.35);
        --accent:#b33;
      }
      html,body{height:100%;}
      body{
        margin:0; padding:40px; background:var(--bg); font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
      }

      /* outer ballot unit shell */
      .bu-wrap{display:flex; justify-content:center;}
      .ballot-unit{
        width:460px; background:var(--panel); border-radius:10px; padding:14px; box-shadow:0 10px 30px rgba(0,0,0,0.35) inset, 0 8px 30px rgba(0,0,0,0.25);
        border-top:6px solid rgba(0,0,0,0.12);
      }

      /* top header strip */
      .bu-header{display:flex; justify-content:space-between; align-items:center; padding:6px 10px; background:linear-gradient(#e9e3d8,#dcd4c6); border-radius:6px; margin-bottom:10px; font-weight:700; font-size:13px;}
      .bu-header .ready { color:var(--accent); font-weight:800; }

      /* ballot paper area */
      .bu-paper{background:linear-gradient(#ffffff,#fbfbfb); border-radius:6px; padding:6px; box-shadow:0 2px 0 rgba(0,0,0,0.06) inset;}

      /* row layout: left label area and right button column */
      .bu-row{display:flex; align-items:center; gap:10px; padding:8px 6px; border-bottom:1px solid rgba(0,0,0,0.06);}
      .bu-row:last-child{border-bottom:0}

      /* left: symbol + name */
      .bu-left{display:flex; align-items:center; gap:12px; width:78%;}
      .symbol{width:58px; height:48px; background:var(--paper); border:2px solid #bfbfbf; display:flex; align-items:center; justify-content:center; border-radius:6px; font-weight:800; font-size:22px; box-shadow:0 2px 0 rgba(0,0,0,0.04);}
      .candidate-meta{display:flex; justify-content:center;}
      .cand-name{font-weight:700; font-size:14px;display: inline}
      .cand-no{font-weight:800; color:#333; font-size:13px;display: inline;}

      /* right: long oval button with left arrow */
      .bu-right{width:22%; display:flex; justify-content:center;}
      .vote-pill{width:56px; height:34px; border-radius:20px; background:var(--btn); box-shadow:0 6px 10px var(--btn-shadow); position:relative; cursor:pointer;}
      .vote-pill:active {background-color: #0ea8c4;background:linear-gradient(#0d3a5a,#0ea8c4);}
      /* .vote-pill::before{ 
        content:''; position:absolute; left:-32px; top:50%; transform:translateY(-50%); width:0; height:0; border-top:8px solid transparent; border-bottom:8px solid transparent; border-right:12px solid rgba(0,0,0,0.12);
      } */
       /* left arrow */
.arrow-left {
  position: relative;
}

.arrow-left::before {
  content: '';
  position: absolute;
  left: -40px;
  top: 50%;
  transform: translateY(-50%);
  width: 25px;              /* body length */
  height: 16px;             /* body thickness */
  background: rgba(0,0,0,0.12);
}

.arrow-left::after {
  content: '';
  position: absolute;
  left: -52px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-right: 12px solid rgba(0,0,0,0.12);
}

.arrow-left.active:before {
    background-color: #04600d;
}
.arrow-left.active::after {
    border-right-color: #04600d;
}

      .vote-pill::after{content:''; position:absolute; right:6px; top:50%; transform:translateY(-50%); width:14px; height:14px; background:rgba(255,255,255,0.06); border-radius:50%;}

      /* make the blue pill appear inset like real EVM: darker inner */
      .vote-pill .inner{position:absolute; left:6px; right:6px; top:6px; bottom:6px; border-radius:14px;}

      /* small arrows printed left of pill (on paper) */
      .paper-arrow{width:12px; height:12px; border-left:6px solid #333; border-top:6px solid transparent; border-bottom:6px solid transparent; transform:rotate(180deg); margin-right:6px}

      /* spacing for long tall layout */
      .bu-paper .bu-row:nth-child(odd){background:linear-gradient(#fff,#fbfbfb)}
      .bu-paper .bu-row:nth-child(even){background:linear-gradient(#fbfbfb,#f7f7f7)}

      /* responsive */
      @media (max-width:420px){ .ballot-unit{width:96%} .symbol{width:48px;height:40px;font-size:18px} body{padding: 0%;margin-top: 50px;}}

      /* accessibility focus */
      .vote-pill:focus{outline:3px solid rgba(0,120,200,0.18)}

      /* tiny finger pointer using pure CSS (circle + rectangle) */
      .finger{position:relative; width:40px; height:40px; margin-left:8px}
      .finger .pad{position:absolute; right:0; top:6px; width:22px; height:28px; background:#f2d2c2; border-radius:12px; box-shadow:inset 0 -4px 6px rgba(0,0,0,0.06);} 
      .finger .nail{position:absolute; right:6px; top:2px; width:10px; height:8px; background:#ffe9e0; border-radius:3px}


      .blink {
  animation: blinkAnim 0.9s ease-in-out 3; /* duration = 0.4s, repeat 3 times */
}

@keyframes blinkAnim {
  0%   { opacity: 1; }
  50%  { opacity: 0.2; }
  100% { opacity: 1; }
}