:root { color-scheme: light; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { width:100%; height:100%; }
body { margin:0; min-height:100dvh; overflow:hidden; background:#242b35; font-family:Arial, Helvetica, sans-serif; }
.app { height:100dvh; min-height:100dvh; overflow:hidden; display:grid; place-items:center; background:radial-gradient(ellipse at 50% 45%,#667388 0,#303945 56%,#1c222b 100%); }
.rotate-message { display:none; color:#fff; text-align:center; max-width:310px; padding:24px; }
.urna-thumb { width:112px; aspect-ratio:1.65; object-fit:cover; object-position:center; border:2px solid #91a0b6; border-radius:7px; box-shadow:0 6px 14px #0006; }.rotate-message h1 { font-size:27px; margin:17px 0 7px; }.rotate-message p { margin:0; color:#cbd3de; line-height:1.4; }.rotation-help { margin-top:11px!important; font-size:14px; color:#f0f5fb!important; }.phone-icon{width:86px;height:86px;margin:20px auto 0;border:2px solid #8be071;border-radius:50%;display:grid;place-items:center;font-size:58px;line-height:1;color:#8be071;animation:rotateHint 1.8s ease-in-out infinite}@keyframes rotateHint{50%{transform:rotate(-22deg);border-color:#d4ffca}}
.urna { width:var(--urna-width, 94vw); max-width:1020px; aspect-ratio:1.65; position:relative; padding:clamp(10px,1.6vw,20px); padding-top:clamp(22px,4vw,47px); border-radius:5px 5px 11px 11px; background:linear-gradient(105deg,#d9dde4,#f9fafb 42%,#cdd3dc); box-shadow:0 22px 38px #0008, inset 0 1px #fff, inset -6px -7px 13px #9da7b7; }
.urna-top { position:absolute; inset:0 4% auto 2%; height:25%; border-radius:8px 8px 0 0; border-top:1px solid #fff; background:linear-gradient(165deg,#edf0f5,#c8d0dc); transform:perspective(500px) rotateX(18deg); transform-origin:bottom; }
.front { height:100%; position:relative; z-index:1; display:grid; grid-template-columns:1.64fr .82fr; gap:clamp(10px,2vw,27px); align-items:center; }
.display-shell { height:83%; padding:clamp(6px,1.1vw,12px); background:#c8cfdb; border:1px solid #7c8798; box-shadow:inset 0 0 0 2px #e7ebf1, 0 2px 4px #5b647080; display:flex; flex-direction:column; }
.display { min-height:0; flex:1; position:relative; overflow:hidden; color:#18364d; padding:clamp(9px,1.8vw,20px); background:linear-gradient(135deg,#d9f3ff 0%,#c0e4f6 56%,#def4fd 100%); box-shadow:inset 0 0 17px #6b9db8, inset 0 0 0 1px #587d98; }
.header-line { font-size:clamp(8px,1.35vw,17px); letter-spacing:.04em; line-height:1.25; }.header-line strong { display:block; font-size:1.22em; }.candidate-area { position:relative; height:55%; padding-top:clamp(8px,1vw,13px); }.number-label { font-size:clamp(8px,1.2vw,15px); }.digits { display:flex; gap:clamp(3px,.45vw,6px); margin-top:4px; }.digit { width:clamp(20px,3.8vw,46px); height:clamp(25px,4.8vw,55px); border:1px solid #25425a; display:grid; place-items:center; font-size:clamp(16px,3.2vw,37px); font-weight:bold; background:#d7eff9; }.digit.active { animation:cursor 1s steps(2,end) infinite; }.hint { margin-top:clamp(14px,3vw,33px); font-size:clamp(8px,1.15vw,14px); color:#416b83; }.candidate-area.selected .hint { display:none; }.instructions { border-top:1px solid #31536b; font-size:clamp(7px,1.05vw,13px); padding-top:clamp(5px,.8vw,9px); line-height:1.35; }.brand-mini { height:clamp(11px,1.7vw,20px); color:#2580cc; text-align:right; padding-right:3%; font-size:clamp(5px,.65vw,8px); font-weight:bold; }.brand-mini i{font-weight:normal;color:#7c8790}.candidate-card { position:absolute; inset:0; font-size:clamp(7px,1.05vw,13px); }.candidate-photo { position:absolute; right:0; top:0; width:auto; height:clamp(75px,15.5vw,178px); max-height:100%; aspect-ratio:3/4; border:1px solid #21425c; background-color:#b9dfee; background-image:linear-gradient(#b9dfeeb3,#91c5dfb3),url('assets/candidato.jpg'); background-size:cover,auto 100%; background-position:center,center bottom; background-repeat:no-repeat; background-blend-mode:multiply; }.candidate-details { position:absolute; left:0; right:45%; bottom:clamp(2px,.5vw,6px); top:auto; display:grid; gap:clamp(2px,.4vw,5px); line-height:1.15; white-space:nowrap; }.candidate-details strong { display:block; }.end-screen{display:none;position:absolute;inset:0;align-items:center;justify-content:center;font-size:clamp(48px,13vw,150px);font-weight:bold;letter-spacing:.07em;background:#d6f0fa;}.display.finished .end-screen{display:flex}.display.finished .header-line,.display.finished .candidate-area,.display.finished .instructions{visibility:hidden}@keyframes cursor{50%{opacity:.22}}
.keypad-section { height:100%; padding:clamp(6px,1vw,13px); display:grid; grid-template-rows:26% minmax(0,1fr) auto; background:linear-gradient(135deg,#24282f,#080a0e); box-shadow:inset 1px 1px 3px #6f747b,0 1px 3px #5a6070; }.justice { background:#eef0f3; display:flex; align-items:center; justify-content:center; gap:8px; font-size:clamp(8px,1.55vw,18px); line-height:.93; color:#252a35; }.seal { width:clamp(25px,4.5vw,52px); height:clamp(25px,4.5vw,52px); object-fit:contain; }.keypad{width:76%;height:94%;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);gap:clamp(5px,.9vw,10px)}
button{font-family:inherit;border:0;cursor:pointer;touch-action:manipulation}.key { color:#dedfe1; font-size:clamp(13px,2.4vw,29px); border-radius:3px; background:linear-gradient(145deg,#444850,#0a0b0e 62%); box-shadow:0 4px #030407, inset 1px 1px #666b72, inset -1px -1px #000; transition:transform .08s ease,box-shadow .08s ease,filter .08s ease; }.key.zero{grid-column:2}.key:active,.key.pressed{transform:translateY(4px);filter:brightness(.75);box-shadow:0 0 #030407,inset 2px 2px 5px #000}.action-row{width:94%;margin:0 auto;display:grid;grid-template-columns:1fr 1fr 1.38fr;gap:clamp(4px,.85vw,10px);align-items:start}.action{min-width:0;height:clamp(29px,4.2vw,50px);font-size:clamp(4px,.72vw,9px);letter-spacing:-.035em;white-space:nowrap;font-weight:bold;border-radius:2px;padding:0 2px;box-shadow:0 4px #1118;transition:transform .08s ease,box-shadow .08s ease,filter .08s ease}.action:active,.action.pressed{transform:translateY(4px);filter:brightness(.8);box-shadow:0 0 #1118}.white{background:#e5e9eb;color:#31353a}.orange{background:#db6e32;color:#3a1909}.green{background:#47b571;color:#062b17}.ridges{position:absolute;z-index:2;bottom:-1px;left:3%;right:3%;display:flex;justify-content:space-between}.ridges i{height:clamp(9px,1.7vw,19px);width:clamp(3px,.5vw,6px);background:#24282d;border-radius:1px 0 0 0;box-shadow:1px 0 #fff}
.training-note{position:absolute;bottom:1.3vh;margin:0;color:#c6d0dc;font-size:clamp(7px,.9vw,11px);letter-spacing:.11em}
.instagram-help{position:fixed;z-index:20;inset:12px 12px auto;max-width:420px;margin:auto;padding:12px 42px 12px 14px;border:1px solid #93c7e5;border-radius:10px;background:#12334feF;color:#fff;font-size:14px;line-height:1.35;box-shadow:0 5px 18px #0008}.instagram-help b{display:block;font-size:15px}.instagram-help button{position:absolute;right:8px;top:7px;width:27px;height:27px;border-radius:50%;background:#e8f5fb;color:#12334f;font-size:18px;line-height:1;box-shadow:none}.instagram-help button:active{transform:scale(.9)}
@media (orientation:portrait){.urna,.training-note{display:none}.rotate-message{display:block}}
@media (orientation:landscape) and (max-height:520px){.urna{width:var(--urna-width,95vw)}.training-note{display:none}}