.world-clock .clock-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:35px;max-width:1250px;margin:0 auto}.clock-card{background:#ffffff;padding:30px 20px 28px;border-radius:16px;border:1px solid #edf2f7;box-shadow:0 10px 25px rgba(0,0,0,0.05);text-align:center;display:flex;flex-direction:column;align-items:center}.world-clock .city-name{font-size:1.25rem;font-weight:600;color:#2f3640;margin-bottom:24px}.analog-clock{width:180px;height:180px;border:2px solid #dcdde1;border-radius:50%;position:relative;margin-bottom:30px;background:#ffffff;box-shadow:0 4px 12px rgba(0,0,0,0.04)}.analog-clock::after{content:"";position:absolute;width:11px;height:11px;background:#111111;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);z-index:20}.number{position:absolute;width:100%;height:100%;text-align:center;font-size:1.15rem;font-weight:500;color:#2f3640;padding:8px}.world-clock .number span{display:inline-block}.world-clock .num-1{transform:rotate(30deg)}.world-clock .num-1 span{transform:rotate(-30deg)}.world-clock .num-2{transform:rotate(60deg)}.world-clock .num-2 span{transform:rotate(-60deg)}.world-clock .num-3{transform:rotate(90deg)}.world-clock .num-3 span{transform:rotate(-90deg)}.world-clock .num-4{transform:rotate(120deg)}.world-clock .num-4 span{transform:rotate(-120deg)}.world-clock .num-5{transform:rotate(150deg)}.world-clock .num-5 span{transform:rotate(-150deg)}.world-clock .num-6{transform:rotate(180deg)}.world-clock .num-6 span{transform:rotate(-180deg)}.world-clock .num-7{transform:rotate(210deg)}.world-clock .num-7 span{transform:rotate(-210deg)}.world-clock .num-8{transform:rotate(240deg)}.world-clock .num-8 span{transform:rotate(-240deg)}.world-clock .num-9{transform:rotate(270deg)}.world-clock .num-9 span{transform:rotate(-270deg)}.world-clock .num-10{transform:rotate(300deg)}.world-clock .num-10 span{transform:rotate(-300deg)}.world-clock .num-11{transform:rotate(330deg)}.world-clock .num-11 span{transform:rotate(-330deg)}.world-clock .num-12{transform:rotate(0deg)}.world-clock .num-12 span{transform:rotate(0deg)}.hand{position:absolute;bottom:50%;left:50%;transform-origin:bottom center;border-radius:3px}.world-clock .hour-hand{width:5px;height:45px;margin-left:-2.5px;background:#111111;z-index:7}.world-clock .minute-hand{width:3.5px;height:65px;margin-left:-1.75px;background:#111111;z-index:8}.world-clock .second-hand{width:1.5px;height:75px;margin-left:-0.75px;background:#e84118;z-index:9}.flip-clock{display:flex;align-items:center;justify-content:center;gap:5px;background:#dfe4ea;padding:12px 14px;border-radius:10px;margin-bottom:14px;box-shadow:inset 0 1px 2px rgba(255,255,255,0.7)}.world-clock .flip-group{display:flex;gap:4px}.flip-card{position:relative;width:38px;height:56px;perspective:350px;font-size:2rem;font-weight:700;color:#ffffff;border-radius:5px;background:#2f3640;box-shadow:0 4px 8px rgba(0,0,0,0.30)}.flip-card .top,.flip-card .bottom,.flip-card .flip-top,.flip-card .flip-bottom{position:absolute;left:0;width:100%;height:50%;overflow:hidden;background:linear-gradient( to bottom,#3a414b,#272d35 );color:#ffffff;text-align:center;backface-visibility:hidden;-webkit-backface-visibility:hidden}.flip-card .top{top:0;line-height:56px;border-radius:5px 5px 0 0;border-bottom:1px solid rgba(0,0,0,0.8);z-index:1}.flip-card .bottom{bottom:0;line-height:0;border-radius:0 0 5px 5px;background:linear-gradient( to bottom,#252b32,#343b45 );z-index:1}.flip-card .flip-top{top:0;line-height:56px;transform-origin:bottom center;transform:rotateX(0deg);border-radius:5px 5px 0 0;border-bottom:1px solid rgba(0,0,0,0.9);z-index:5}.flip-card .flip-bottom{bottom:0;line-height:0;transform-origin:top center;transform:rotateX(90deg);border-radius:0 0 5px 5px;background:linear-gradient( to bottom,#252b32,#343b45 );z-index:4}.flip-card.flipping .flip-top{animation:flipTop 0.28s cubic-bezier(0.55,0.055,0.675,0.19) forwards}.world-clock .flip-card.flipping .flip-bottom{animation:flipBottom 0.28s cubic-bezier(0.215,0.61,0.355,1) 0.28s forwards}@keyframes flipTop{0%{transform:rotateX(0deg);filter:brightness(1)}100%{transform:rotateX(-90deg);filter:brightness(0.65)}}@keyframes flipBottom{0%{transform:rotateX(90deg);filter:brightness(0.65)}100%{transform:rotateX(0deg);filter:brightness(1)}}.flip-card::before{content:"";position:absolute;left:0;top:calc(50% - 1px);width:100%;height:2px;background:rgba(0,0,0,0.55);z-index:10;pointer-events:none}.flip-card::after{content:"";position:absolute;top:calc(50% - 3px);left:-1px;width:calc(100% + 2px);height:6px;border-left:2px solid #15191e;border-right:2px solid #15191e;z-index:11;pointer-events:none}.flip-separator{font-size:2rem;font-weight:700;color:#2f3640;line-height:56px;padding:0 1px;transform:translateY(-2px)}.date{font-size:0.85rem;color:#7f8c8d;text-transform:uppercase;letter-spacing:0.5px}@media (max-width:600px){.world-clock .clock-container{grid-template-columns:1fr;gap:25px}.world-clock .clock-card{padding:25px 10px}.world-clock .flip-clock{padding:10px;gap:3px}.world-clock .flip-card{width:34px;height:52px;font-size:1.8rem}.world-clock .flip-card .top,.world-clock .flip-card .flip-top{line-height:52px}.world-clock .flip-separator{line-height:52px;font-size:1.8rem}}.world-clock .clock-container{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:28px}.world-clock .clock-card{border-top:3px solid var(--gold-400);border-radius:var(--radius);box-shadow:var(--shadow-soft);min-width:0}.world-clock .city-name{color:var(--blue-800);overflow-wrap:anywhere}.world-clock .analog-clock{border-color:var(--blue-200);background:var(--cream)}.world-clock .number{color:var(--blue-800)}.world-clock .hour-hand,.world-clock .minute-hand,.world-clock .analog-clock::after{background:var(--blue-800)}.world-clock .second-hand{background:var(--gold-500)}.world-clock .flip-clock{background:var(--blue-100)}.world-clock .flip-card,.world-clock .flip-card .top,.world-clock .flip-card .flip-top{background:var(--blue-800)}.world-clock .flip-card .bottom,.world-clock .flip-card .flip-bottom{background:var(--blue-700)}.world-clock .date{color:var(--blue-800)}.world-clock .zone-name{color:var(--text-muted)}.world-clock .zone-name{font-size:.8rem;margin-top:6px;overflow-wrap:anywhere}@media(max-width:380px){.world-clock .clock-card{padding:24px 10px}.world-clock .flip-clock{padding:10px 6px;gap:3px}.world-clock .flip-card{width:32px}}@media(prefers-reduced-motion:reduce){.world-clock .flip-card.flipping .flip-top,.world-clock .flip-card.flipping .flip-bottom{animation:none}}.world-clock .clock-empty{text-align:center}