#gameCanvas{position:fixed;top:var(--topbar-height);left:0;right:var(--right-buttons-width);bottom:0;width:calc(100vw - var(--right-buttons-width));height:calc(100vh - var(--topbar-height));height:calc(100dvh - var(--topbar-height));display:block;background:linear-gradient(135deg,#0a0806cc,#1a1410cc);image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;cursor:grab;z-index:1;touch-action:none}#gameCanvas:active{cursor:grabbing}.side-panel.left-panel.open~#gameCanvas{left:var(--left-panel-width);width:calc(100vw - var(--left-panel-width) - var(--right-buttons-width))}@media(max-width:480px){#gameCanvas{right:var(--right-buttons-width);width:calc(100vw - var(--right-buttons-width));height:calc(100dvh - var(--topbar-height))}.side-panel.left-panel.open~#gameCanvas{left:0;width:0;opacity:0;pointer-events:none}.side-panel.right-panel.open~#gameCanvas{width:0;opacity:0;pointer-events:none}}@media(min-width:481px)and (max-width:768px){#gameCanvas{right:var(--right-buttons-width);width:calc(100vw - var(--right-buttons-width));height:calc(100dvh - var(--topbar-height))}.side-panel.left-panel.open~#gameCanvas{left:0;width:0;opacity:0;pointer-events:none}.side-panel.right-panel.open~#gameCanvas{width:0;opacity:0;pointer-events:none}}@media(min-width:769px)and (max-width:1024px){#gameCanvas{right:var(--right-buttons-width);width:calc(100vw - var(--right-buttons-width))}.side-panel.left-panel.open~#gameCanvas{left:var(--left-panel-width);width:calc(100vw - var(--left-panel-width) - var(--right-buttons-width))}}@media(max-width:768px)and (orientation:landscape){#gameCanvas{height:calc(100dvh - var(--topbar-height))}}@media(min-width:481px)and (max-width:1024px)and (orientation:portrait){#gameCanvas{height:calc(100dvh - var(--topbar-height))}}@media(hover:none)and (pointer:coarse){#gameCanvas{touch-action:pan-x pan-y pinch-zoom;cursor:default}#gameCanvas:active{cursor:default}}#gameCanvas.loading{opacity:.5;pointer-events:none}#gameCanvas.loading:before{content:"Loading...";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--medieval-gold-light);font-size:var(--font-2xl);font-weight:var(--font-bold);z-index:10;text-shadow:0 2px 8px rgba(0,0,0,.8)}@media(-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){#gameCanvas{image-rendering:-webkit-optimize-contrast;image-rendering:pixelated}}#gameCanvas{will-change:transform;transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden}@supports (padding: env(safe-area-inset-top)){#gameCanvas{top:calc(var(--topbar-height) + env(safe-area-inset-top,0px));height:calc(100vh - var(--topbar-height) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));height:calc(100dvh - var(--topbar-height) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}}.game-canvas-container{position:fixed;top:var(--topbar-height);left:0;right:var(--right-buttons-width);bottom:0;overflow:hidden;z-index:1}.stat-section{margin-bottom:var(--spacing-lg)}.stat-section-title{font-size:1.1rem;color:var(--medieval-gold-light);font-weight:var(--font-bold);margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-sm);border-bottom:2px solid var(--medieval-gold-dark)}@media(max-width:480px){.stat-section-title{font-size:1rem}}.stat-grid{display:flex;flex-direction:column;gap:var(--spacing-sm)}.stat-row{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-sm) var(--spacing-md);background:#1a1410cc;border-radius:var(--radius-sm);border-left:3px solid var(--medieval-gold-dark);transition:all var(--transition-fast);min-height:44px}@media(max-width:480px){.stat-row{padding:var(--spacing-xs) var(--spacing-sm)}}.stat-row:hover{filter:brightness(1.1)}.stat-label{font-size:.9rem;color:var(--color-text-dim);font-weight:var(--font-semibold)}@media(max-width:480px){.stat-label{font-size:.8rem}}.stat-value{font-size:1rem;color:var(--color-text-bright);font-weight:var(--font-bold);font-variant-numeric:tabular-nums}@media(max-width:480px){.stat-value{font-size:.9rem}}.stat-value.highlight{font-size:1.2rem;color:var(--color-success)}.popup-overlay{position:fixed;inset:0;background:#000000e6;display:none;align-items:center;justify-content:center;z-index:var(--z-modal-backdrop);animation:fadeIn .3s ease;padding:var(--spacing-md)}.popup-overlay.show{display:flex}.popup-box{background:linear-gradient(135deg,#1a1410fa,#2d2419fa);border:4px solid var(--medieval-gold);border-radius:var(--radius-xl);padding:var(--spacing-xl);max-width:500px;width:90%;text-align:center;box-shadow:0 20px 60px #000000e6,0 0 80px #d4af3766;animation:popupSlide .3s ease;position:relative;max-height:80vh;max-height:80dvh;overflow-y:auto}@media(max-width:768px){.popup-box{width:95%;max-width:none;padding:var(--spacing-lg);max-height:85vh;max-height:85dvh}}@media(max-width:480px){.popup-box{width:calc(100% - var(--spacing-md) * 2);padding:var(--spacing-md);border-width:3px;max-height:90vh;max-height:90dvh}}@keyframes popupSlide{0%{transform:translateY(-50px);opacity:0}to{transform:translateY(0);opacity:1}}.popup-header{margin-bottom:var(--spacing-lg)}.popup-icon{font-size:4rem;margin-bottom:var(--spacing-md);filter:drop-shadow(0 4px 12px rgba(0,0,0,.5))}@media(max-width:480px){.popup-icon{font-size:3rem}}.popup-title{font-size:1.8rem;color:var(--color-text-bright);font-weight:var(--font-bold);margin-bottom:var(--spacing-md);text-shadow:0 2px 8px rgba(0,0,0,.8)}@media(max-width:480px){.popup-title{font-size:1.4rem}}.popup-body{margin-bottom:var(--spacing-lg)}.popup-text{color:var(--color-text);font-size:1rem;line-height:var(--leading-relaxed);margin-bottom:var(--spacing-lg);white-space:pre-line}@media(max-width:480px){.popup-text{font-size:.9rem}}.popup-footer{display:flex;gap:var(--spacing-md);justify-content:center}@media(max-width:480px){.popup-footer{flex-direction:column;gap:var(--spacing-sm)}}.popup-buttons{display:flex;gap:var(--spacing-md);justify-content:center;flex-wrap:wrap}@media(max-width:480px){.popup-buttons{flex-direction:column;gap:var(--spacing-sm);width:100%}}.popup-button{padding:var(--spacing-md) var(--spacing-xl);border-radius:var(--radius-md);font-weight:var(--font-bold);font-size:.95rem;cursor:pointer;transition:all var(--transition-normal);text-transform:uppercase;letter-spacing:.5px;border:2px solid;min-height:44px}@media(max-width:480px){.popup-button{padding:var(--spacing-sm) var(--spacing-lg);font-size:.85rem;width:100%}}.popup-button.primary{background:linear-gradient(135deg,var(--medieval-gold),var(--medieval-gold-dark));color:var(--medieval-dark);border-color:var(--medieval-gold-light)}.popup-button.primary:hover{background:linear-gradient(135deg,var(--medieval-gold-light),var(--medieval-gold));filter:brightness(1.15);box-shadow:0 6px 20px #d4af3799}.popup-button.secondary{background:#1a1410e6;color:var(--color-text);border-color:var(--medieval-stone)}.popup-button.secondary:hover{background:#3d3529e6;border-color:var(--medieval-gold-dark);filter:brightness(1.15)}.popup-input{width:100%;padding:var(--spacing-md);border:2px solid var(--medieval-gold-dark);border-radius:var(--radius-md);background:#1a1410cc;color:var(--color-text);font-size:1rem;margin:var(--spacing-md) 0;min-height:44px}@media(max-width:480px){.popup-input{font-size:16px}}.popup-input:focus{border-color:var(--medieval-gold);outline:none;box-shadow:0 0 0 3px #d4af3733}.toast{position:fixed;top:calc(var(--topbar-height) + var(--spacing-md));right:var(--spacing-md);background:linear-gradient(135deg,#1a1410fa,#2d2419fa);border:2px solid var(--medieval-gold);border-radius:var(--radius-lg);padding:var(--spacing-md) var(--spacing-lg);display:flex;align-items:center;gap:var(--spacing-md);min-width:300px;max-width:400px;box-shadow:var(--shadow-xl);transform:translate(500px);opacity:0;transition:all var(--transition-normal);z-index:var(--z-toast)}@media(max-width:768px){.toast{min-width:250px;max-width:calc(100vw - var(--spacing-md) * 2);right:var(--spacing-sm);top:calc(var(--topbar-height) + var(--spacing-sm))}}@media(max-width:480px){.toast{min-width:200px;max-width:calc(100vw - var(--spacing-sm) * 2);padding:var(--spacing-sm) var(--spacing-md);right:var(--spacing-xs);top:calc(var(--topbar-height) + var(--spacing-xs))}}.toast.show{transform:translate(0);opacity:1}.toast-icon{font-size:2rem;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));flex-shrink:0}@media(max-width:480px){.toast-icon{font-size:1.5rem}}.toast-content{flex:1}.toast-title{font-size:1rem;font-weight:var(--font-bold);color:var(--color-text-bright);margin-bottom:4px}@media(max-width:480px){.toast-title{font-size:.9rem}}.toast-message{font-size:.9rem;color:var(--color-text);line-height:var(--leading-snug)}@media(max-width:480px){.toast-message{font-size:.8rem}}.toast-close{background:#ef444433;border:1px solid var(--color-danger);color:var(--color-danger);width:24px;height:24px;min-width:32px;min-height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition-fast)}.toast-close:hover{background:#ef444466;transform:rotate(90deg)}.loading-overlay{position:fixed;inset:0;background:#000000f2;display:flex;align-items:center;justify-content:center;z-index:var(--z-loading);animation:fadeIn .3s ease}.loading-content{text-align:center}.loading-castle{font-size:6rem;margin-bottom:var(--spacing-lg);animation:loadingPulse 2s ease-in-out infinite}@media(max-width:480px){.loading-castle{font-size:4rem}}@keyframes loadingPulse{0%,to{transform:scale(1);filter:drop-shadow(0 0 20px rgba(212,175,55,.6))}50%{transform:scale(1.1);filter:drop-shadow(0 0 40px rgba(212,175,55,.9))}}.loading-title{font-size:2rem;color:var(--medieval-gold-light);font-weight:var(--font-bold);margin-bottom:var(--spacing-lg)}@media(max-width:480px){.loading-title{font-size:1.5rem}}.loading-spinner-large{width:50px;height:50px;border:4px solid rgba(212,175,55,.3);border-top-color:var(--medieval-gold);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto var(--spacing-lg)}.loading-status{color:var(--color-text);font-size:1rem;margin-bottom:var(--spacing-md)}@media(max-width:480px){.loading-status{font-size:.9rem}}.loading-progress{width:200px;height:6px;background:#1a1410cc;border-radius:var(--radius-full);margin:0 auto;overflow:hidden;position:relative}@media(max-width:480px){.loading-progress{width:150px}}.loading-progress-bar{height:100%;background:linear-gradient(90deg,var(--medieval-gold),var(--medieval-gold-light));border-radius:var(--radius-full);transition:width var(--transition-normal)}.action-buttons{display:flex;gap:var(--spacing-md);flex-wrap:wrap;justify-content:center}@media(max-width:768px){.action-buttons{flex-direction:column;gap:var(--spacing-sm)}}.btn-action-secondary{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);font-weight:var(--font-semibold);font-size:.9rem;cursor:pointer;transition:all var(--transition-normal);text-transform:uppercase;letter-spacing:.5px;background:#1a1410e6;color:var(--color-text);border:2px solid var(--medieval-stone);display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);flex:1;min-height:44px}@media(max-width:768px){.btn-action-secondary{min-width:100%}}.btn-action-secondary:hover:not(.disabled){background:#3d3529e6;border-color:var(--medieval-gold-dark);filter:brightness(1.15);box-shadow:0 4px 12px rgba(var(--medieval-gold-rgb),.3)}.btn-action-small{padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-sm);font-weight:var(--font-semibold);font-size:.85rem;cursor:pointer;transition:all var(--transition-normal);text-transform:uppercase;letter-spacing:.3px;background:linear-gradient(135deg,#4ade80,#22c55e);color:#fff;border:2px solid #86efac;display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-xs);min-height:36px}@media(max-width:480px){.btn-action-small{min-height:44px;padding:var(--spacing-sm) var(--spacing-md)}}.btn-action-small:hover:not(.disabled){background:linear-gradient(135deg,#86efac,#4ade80);filter:brightness(1.15);box-shadow:0 4px 12px #4ade8066}.btn-action-danger{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);font-weight:var(--font-semibold);font-size:.9rem;cursor:pointer;transition:all var(--transition-normal);text-transform:uppercase;letter-spacing:.5px;background:linear-gradient(135deg,var(--color-danger),#d32f2f);color:#fff;border:2px solid var(--color-danger);display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);min-height:44px}.btn-action-danger:hover:not(.disabled){background:linear-gradient(135deg,#d32f2f,var(--color-danger));filter:brightness(1.15);box-shadow:0 4px 12px rgba(var(--color-danger-rgb),.4)}.btn-upgrade{padding:6px 10px;border-radius:6px;font-weight:var(--font-semibold);font-size:.75rem;cursor:pointer;transition:all var(--transition-fast);text-transform:uppercase;letter-spacing:.3px;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border:1px solid #60a5fa;display:flex;align-items:center;justify-content:center;gap:4px;min-height:32px;flex-direction:column;line-height:1.2;white-space:nowrap;flex:1 1 auto;min-width:70px}.btn-upgrade:hover:not(.disabled){background:linear-gradient(135deg,#60a5fa,#3b82f6);filter:brightness(1.15);box-shadow:0 2px 8px #3b82f64d}.btn-upgrade-xp{padding:6px 10px;border-radius:6px;font-weight:var(--font-semibold);font-size:.75rem;cursor:pointer;transition:all var(--transition-fast);text-transform:uppercase;letter-spacing:.3px;background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;border:1px solid #fbbf24;display:flex;align-items:center;justify-content:center;gap:4px;min-height:32px;flex-direction:column;line-height:1.2;white-space:nowrap;flex:1 1 auto;min-width:70px}.btn-upgrade-xp:hover:not(.disabled){background:linear-gradient(135deg,#fbbf24,#f59e0b);filter:brightness(1.15);box-shadow:0 2px 8px #f59e0b4d}.btn-upgrade-both{padding:6px 10px;border-radius:6px;font-weight:var(--font-semibold);font-size:.75rem;cursor:pointer;transition:all var(--transition-fast);text-transform:uppercase;letter-spacing:.3px;background:linear-gradient(135deg,#06b6d4,#0891b2);color:#fff;border:1px solid #22d3ee;display:flex;align-items:center;justify-content:center;gap:4px;min-height:32px;flex-direction:column;line-height:1.2;white-space:nowrap;flex:1 1 auto;min-width:85px}.btn-upgrade-both:hover:not(.disabled){background:linear-gradient(135deg,#22d3ee,#06b6d4);filter:brightness(1.15);box-shadow:0 2px 8px #06b6d44d}.btn-evolve{padding:10px 16px;border-radius:var(--radius-sm);font-weight:var(--font-semibold);font-size:.9rem;cursor:pointer;transition:all var(--transition-normal);text-transform:uppercase;letter-spacing:.3px;background:linear-gradient(135deg,#a855f7,#9333ea);color:#fff;border:2px solid #c084fc;display:flex;align-items:center;justify-content:center;gap:var(--spacing-xs);min-height:40px;flex-direction:column;width:100%;margin-top:4px}.btn-evolve:hover:not(.disabled){background:linear-gradient(135deg,#c084fc,#a855f7);filter:brightness(1.15);box-shadow:0 4px 12px #a855f766}.btn-build{padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-sm);font-weight:var(--font-semibold);font-size:.85rem;cursor:pointer;transition:all var(--transition-normal);text-transform:uppercase;letter-spacing:.3px;background:linear-gradient(135deg,#4ade80,#22c55e);color:#fff;border:2px solid #86efac;display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-xs);min-height:36px;flex-direction:column;padding:var(--spacing-xs) var(--spacing-sm)}.btn-build:hover:not(.disabled){background:linear-gradient(135deg,#86efac,#4ade80);filter:brightness(1.15);box-shadow:0 4px 12px #4ade8066}.payment-options{display:flex;gap:4px;width:100%;flex-wrap:wrap;align-items:stretch}.payment-options.single-option{display:flex}.btn-label{font-size:.65rem;font-weight:var(--font-bold);white-space:nowrap}.btn-cost{font-size:.6rem;opacity:.95;font-weight:var(--font-normal);text-transform:none;letter-spacing:0;white-space:nowrap}.btn-action.disabled,.btn-action-secondary.disabled,.btn-action-small.disabled,.btn-action-danger.disabled,.btn-upgrade.disabled,.btn-upgrade-xp.disabled,.btn-upgrade-both.disabled,.btn-evolve.disabled,.btn-build.disabled{opacity:.4;cursor:not-allowed;transform:none!important;box-shadow:none!important}.profile-content{padding:var(--spacing-md)}.stat-section{background:#0000004d;border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:var(--spacing-md);margin-bottom:var(--spacing-md)}.stat-section h3{font-size:var(--font-base);margin:0 0 var(--spacing-md) 0;color:var(--medieval-gold);text-transform:uppercase;letter-spacing:1px;font-weight:var(--font-semibold)}.stat-section .stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--spacing-md);flex-direction:row}@media(max-width:768px){.stat-section .stat-grid{grid-template-columns:1fr}}.stat-section .stat-grid .stat-item{display:flex;flex-direction:column;gap:var(--spacing-xs)}.stat-section .stat-grid .label{font-size:var(--font-xs);opacity:.6;text-transform:uppercase;letter-spacing:.5px}.stat-section .stat-grid .value{font-size:var(--font-lg);font-weight:var(--font-bold);color:var(--medieval-gold-light);font-variant-numeric:tabular-nums}.raid-info,.army-overview{padding:var(--spacing-md)}.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--spacing-md);margin-bottom:var(--spacing-xl)}@media(max-width:768px){.stats-row{grid-template-columns:1fr}}.stat-box{background:#0006;border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:var(--spacing-md);text-align:center}.stat-box .stat-label{display:block;font-size:var(--font-xs);opacity:.6;text-transform:uppercase;margin-bottom:var(--spacing-sm);letter-spacing:.5px}.stat-box .stat-value{display:block;font-size:var(--font-3xl);font-weight:var(--font-bold);color:var(--medieval-gold-light);font-variant-numeric:tabular-nums}@media(max-width:480px){.stat-box .stat-value{font-size:var(--font-2xl)}}.raid-form{background:#0000004d;border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:var(--spacing-xl);margin-bottom:var(--spacing-md)}@media(max-width:480px){.raid-form{padding:var(--spacing-md)}}.raid-form h3{margin:0 0 var(--spacing-md) 0;font-size:var(--font-base);color:var(--medieval-gold);text-transform:uppercase;letter-spacing:1px}.input-field{width:100%;padding:var(--spacing-md);background:var(--bg-input);border:2px solid var(--border-secondary);border-radius:var(--radius-md);color:var(--color-text);font-size:var(--font-sm);margin-bottom:var(--spacing-md);transition:all var(--transition-fast);min-height:44px}@media(max-width:480px){.input-field{font-size:16px}}.input-field:focus{outline:none;border-color:var(--medieval-gold);box-shadow:0 0 0 3px rgba(var(--medieval-gold-rgb),.2)}.button-row{display:flex;gap:var(--spacing-md)}@media(max-width:480px){.button-row{flex-direction:column;gap:var(--spacing-sm)}}.button-row button{flex:1}@media(max-width:480px){.button-row button{width:100%}}.raid-warning{background:#ffa5001a;border:1px solid rgba(255,165,0,.3);border-radius:var(--radius-md);padding:var(--spacing-md)}.raid-warning p{margin:.25rem 0;font-size:var(--font-sm);color:var(--color-warning)}.army-list{background:#0000004d;border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:var(--spacing-md)}.army-row{display:grid;grid-template-columns:3rem 1fr auto auto;gap:var(--spacing-md);align-items:center;padding:var(--spacing-md);border-bottom:1px solid rgba(255,255,255,.05);transition:all var(--transition-fast);min-height:60px}@media(max-width:768px){.army-row{grid-template-columns:2.5rem 1fr auto;gap:var(--spacing-sm)}.army-row .unit-power{grid-column:2 / 4;text-align:right}}.army-row:hover{filter:brightness(1.1)}.army-row:last-child{border-bottom:none}.army-row .unit-icon{font-size:2rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}@media(max-width:480px){.army-row .unit-icon{font-size:1.5rem}}.army-row .unit-name{font-weight:var(--font-semibold);color:var(--color-text)}.army-row .unit-count{color:var(--medieval-gold-light);font-weight:var(--font-bold);font-variant-numeric:tabular-nums}.army-row .unit-power{color:var(--color-success);font-weight:var(--font-semibold);font-variant-numeric:tabular-nums}.content-placeholder{padding:var(--spacing-4xl) var(--spacing-md);text-align:center}@media(max-width:480px){.content-placeholder{padding:var(--spacing-2xl) var(--spacing-sm)}}.content-placeholder p{font-size:var(--font-base);opacity:.6;margin:var(--spacing-sm) 0}.stats-compact{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:var(--spacing-sm);padding:var(--spacing-md);background:#0000004d;border-radius:var(--radius-lg);margin-bottom:var(--spacing-md)}@media(max-width:768px){.stats-compact{grid-template-columns:repeat(3,1fr)}}@media(max-width:480px){.stats-compact{grid-template-columns:repeat(2,1fr)}}.icon-large{font-size:3rem;filter:drop-shadow(0 2px 8px rgba(0,0,0,.6))}@media(max-width:768px){.icon-large{font-size:2rem}}.icon-medium{font-size:2rem;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}@media(max-width:480px){.icon-medium{font-size:1.5rem}}.icon-small{font-size:1.2rem}.village-grid,.building-grid,.unit-grid{-webkit-overflow-scrolling:touch}@media(max-width:768px){.card-header{gap:var(--spacing-sm)}}@media(prefers-contrast:high){.village-card,.building-card,.unit-card,.btn-action,.btn-action-secondary,.btn-action-small,.btn-action-danger{border-width:3px}}@media(prefers-reduced-motion:reduce){.village-card,.building-card,.unit-card,.btn-action,.btn-action-secondary,.btn-action-small,.btn-action-danger,.army-row{transition:none!important;animation:none!important}}@media(hover:none)and (pointer:coarse){.btn-primary,.btn-secondary,.btn-action,.btn-danger,.btn-action-secondary,.btn-action-small,.btn-action-danger,.popup-button,.tab-button,.menu-toggle{min-height:44px;min-width:44px}.popup-close,.toast-close,.panel-close{min-width:44px;min-height:44px}}@media(max-width:1024px){.topbar{padding:8px 12px!important}.resource-display{gap:10px!important}.resource-item{padding:6px 10px!important}.resource-label{font-size:11px!important}.resource-value{min-width:60px!important;font-size:.95rem!important}.wallet-btn{padding:8px 14px!important;font-size:.9rem!important}.title-text{font-size:1.3rem!important}}@media(max-width:900px){.topbar{height:auto!important;min-height:50px;flex-wrap:wrap;padding:8px 10px!important;gap:8px}.topbar-left{flex:0 0 auto;order:1}.topbar-center{flex:1 1 auto;order:2;justify-content:flex-start}.topbar-right{flex:0 0 auto;order:3}.resource-display{gap:8px!important;flex-wrap:nowrap}.resource-item{padding:6px 8px!important;min-width:0;flex:0 1 auto}.resource-value{min-width:50px!important}}@media(max-width:768px){.topbar{padding:8px 10px!important;gap:8px}.topbar-left,.topbar-center,.topbar-right{flex:1 1 100%;min-width:0}.topbar-left{order:1;justify-content:center}.topbar-center{order:2;justify-content:center}.topbar-right{order:3;justify-content:center}.game-title{justify-content:center}.resource-display{flex-wrap:wrap;justify-content:center;width:100%;gap:6px!important}.resource-item{flex:0 1 calc(33.333% - 6px);min-width:90px;padding:6px 8px!important;justify-content:center}.resource-label{font-size:10px!important}.resource-value{font-size:13px!important;min-width:auto!important}.resource-icon{font-size:1.1rem!important}.wallet-btn{width:100%;justify-content:center;padding:10px 16px!important;font-size:14px!important}}@media(max-width:480px){.topbar{padding:6px 8px!important;gap:6px}.resource-display{gap:4px!important}.resource-item{flex:0 1 calc(50% - 4px);min-width:0;padding:5px 6px!important}.resource-label{font-size:9px!important}.resource-value{font-size:12px!important}.resource-icon,.title-text{font-size:1rem!important}.title-icon{font-size:1.3rem!important}.wallet-btn{padding:8px 12px!important;font-size:13px!important}.wallet-icon{font-size:1rem!important}.wallet-text{font-size:13px!important}}@media(max-width:360px){.topbar{padding:4px 6px!important}.resource-item{padding:4px 5px!important}.resource-label{font-size:8px!important}.resource-value{font-size:11px!important}.wallet-btn{padding:6px 10px!important;font-size:12px!important}}.building-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:15px 0;padding:0}.building-stats-grid .stat-card:nth-child(3){grid-column:1 / -1}.stat-card{display:flex;align-items:center;gap:8px;padding:10px;border-radius:8px;border:2px solid;background:#0006;transition:all .2s ease;min-width:0;overflow:hidden}.stat-card:hover{filter:brightness(1.1)}.stat-card.stat-points{border-color:#a78bfa80;background:linear-gradient(135deg,#8b5cf626,#0006)}.stat-card.stat-apr{border-color:#ef444480;background:linear-gradient(135deg,#ef444426,#0006)}.stat-card.stat-defense{border-color:#3b82f680;background:linear-gradient(135deg,#3b82f626,#0006)}.stat-icon{font-size:1.5em;line-height:1;flex-shrink:0;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}.stat-content{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;overflow:hidden}.stat-label{font-size:.7em;text-transform:uppercase;letter-spacing:.5px;color:#ffffffb3;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stat-value{font-size:1.2em;font-weight:700;line-height:1;white-space:nowrap}.stat-card.stat-points .stat-value{color:#a78bfa;text-shadow:0 0 10px rgba(167,139,250,.5)}.stat-card.stat-apr .stat-value{color:#ef4444;text-shadow:0 0 10px rgba(239,68,68,.5)}.stat-card.stat-defense .stat-value{color:#3b82f6;text-shadow:0 0 10px rgba(59,130,246,.5)}.building-cost{display:flex;align-items:center;justify-content:space-between;padding:12px 15px;background:linear-gradient(135deg,#d4af3726,#0006);border:2px solid rgba(212,175,55,.4);border-radius:8px;margin:10px 0}.building-cost:hover{filter:brightness(1.1)}.cost-label{font-size:.9em;font-weight:600;color:#fffc;text-transform:uppercase;letter-spacing:.5px}.cost-value{font-size:1.1em;font-weight:700;color:var(--savage-gold);text-shadow:0 0 10px rgba(212,175,55,.5)}.panel-content .building-stats-grid,.popup-content .building-stats-grid{grid-template-columns:1fr}.panel-content .building-stats-grid .stat-card:nth-child(3),.popup-content .building-stats-grid .stat-card:nth-child(3){grid-column:auto}@media(max-width:768px){.building-stats-grid{grid-template-columns:1fr;gap:8px}.building-stats-grid .stat-card:nth-child(3){grid-column:auto}.stat-card{padding:10px}.stat-icon{font-size:1.5em}.stat-value{font-size:1.2em}}@keyframes pulse-stat{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.stat-value.updated{animation:pulse-stat .3s ease}.village-option{background:linear-gradient(135deg,#1a1410e6,#2d2419e6);border:2px solid rgba(212,175,55,.3);border-radius:8px;padding:20px;transition:all .3s ease;cursor:pointer}.village-option:hover{filter:brightness(1.1)}.village-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;border-bottom:1px solid rgba(212,175,55,.2);padding-bottom:12px}.village-icon{font-size:2rem}.village-header h3{color:var(--savage-gold);margin:0;font-size:1.3rem}.village-stats{margin-bottom:16px}.stat-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.05)}.stat-row.cost{border-bottom:none;padding-top:12px;margin-top:8px;border-top:2px solid rgba(212,175,55,.2)}.stat-label{color:#ccc;font-size:.9rem}.stat-value{color:#fff;font-weight:700}.stat-value.highlight{color:var(--savage-gold);font-size:1.1rem}.village-description{color:#aaa;font-size:.9rem;font-style:italic;margin-bottom:16px;line-height:1.4}.village-select-btn{width:100%;padding:12px;background:linear-gradient(135deg,var(--medieval-gold) 0%,var(--medieval-gold-dark) 100%);border:none;border-radius:4px;color:var(--almost-black);font-weight:700;font-size:1rem;cursor:pointer;transition:all .2s ease}.village-select-btn:hover{filter:brightness(1.15);box-shadow:0 2px 8px #d4af3780}@media(max-width:768px){.village-option{padding:16px}.village-header h3{font-size:1.1rem}.stat-row{padding:6px 0}}.building-upgrade-section{margin-top:var(--spacing-md);padding:var(--spacing-md);background:#0000004d;border-radius:var(--radius-md);border:1px solid var(--border-light)}.upgrade-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-sm);padding-bottom:var(--spacing-sm);border-bottom:1px solid var(--border-light)}.upgrade-title{font-size:.9rem;font-weight:var(--font-semibold);color:var(--medieval-gold-light)}.upgrade-level{font-size:.85rem;font-weight:var(--font-bold);color:var(--color-success);background:#4ade8026;padding:4px 8px;border-radius:var(--radius-sm)}.upgrade-options{display:flex;gap:6px;flex-wrap:wrap}.upgrade-options .btn-upgrade,.upgrade-options .btn-upgrade-xp,.upgrade-options .btn-upgrade-both{flex:1 1 calc(33% - 4px);min-width:80px}.max-level-badge{text-align:center;padding:var(--spacing-sm) var(--spacing-md);background:linear-gradient(135deg,#a855f733,#ec489933);border:1px solid rgba(168,85,247,.4);border-radius:var(--radius-sm);color:var(--medieval-gold-light);font-weight:var(--font-bold);font-size:.9rem;letter-spacing:1px}.xp-unlock-hint{flex:1;text-align:center;padding:8px;background:#f59e0b1a;border:1px dashed rgba(245,158,11,.3);border-radius:var(--radius-sm);color:#f59e0bcc;font-size:.75rem}@media(max-width:480px){.upgrade-options{flex-direction:column}.upgrade-options .btn-upgrade,.upgrade-options .btn-upgrade-xp,.upgrade-options .btn-upgrade-both{flex:1 1 100%;min-width:100%}.upgrade-header{flex-direction:column;gap:8px;align-items:flex-start}}:root{--medieval-dark: #1a1410;--medieval-dark-rgb: 26, 20, 16;--medieval-brown: #2d2419;--medieval-brown-rgb: 45, 36, 25;--medieval-brown-light: #3d3529;--medieval-brown-light-rgb: 61, 53, 41;--medieval-stone: #4a4234;--medieval-stone-rgb: 74, 66, 52;--medieval-gold: #d4af37;--medieval-gold-rgb: 212, 175, 55;--medieval-gold-light: #f0d978;--medieval-gold-light-rgb: 240, 217, 120;--medieval-gold-dark: #b8941f;--medieval-gold-dark-rgb: 184, 148, 31;--medieval-bronze: #cd7f32;--medieval-bronze-rgb: 205, 127, 50;--medieval-silver: #c0c0c0;--medieval-silver-rgb: 192, 192, 192;--medieval-copper: #b87333;--medieval-copper-rgb: 184, 115, 51;--fire-orange: #ff6b35;--fire-orange-rgb: 255, 107, 53;--fire-red: #d84727;--fire-red-rgb: 216, 71, 39;--fire-light: #ff8c5a;--fire-light-rgb: 255, 140, 90;--fire-dark: #b8391f;--fire-dark-rgb: 184, 57, 31;--fire-ember: #ff4500;--fire-ember-rgb: 255, 69, 0;--color-text: #f5f5dc;--color-text-rgb: 245, 245, 220;--color-text-dim: #c7b89a;--color-text-dim-rgb: 199, 184, 154;--color-text-bright: #ffffff;--color-text-bright-rgb: 255, 255, 255;--color-text-muted: #8b7d6b;--color-text-muted-rgb: 139, 125, 107;--color-success: #4ade80;--color-success-rgb: 74, 222, 128;--color-danger: #ef4444;--color-danger-rgb: 239, 68, 68;--color-warning: #fbbf24;--color-warning-rgb: 251, 191, 36;--color-info: #60a5fa;--color-info-rgb: 96, 165, 250;--color-purple: #a855f7;--color-purple-rgb: 168, 85, 247;--bg-dark: rgba(26, 20, 16, .95);--bg-card: rgba(45, 36, 25, .95);--bg-card-hover: rgba(61, 53, 41, .95);--bg-input: rgba(74, 66, 52, .9);--bg-overlay: rgba(0, 0, 0, .85);--bg-overlay-light: rgba(0, 0, 0, .6);--bg-overlay-heavy: rgba(0, 0, 0, .95);--border-primary: var(--medieval-gold-dark);--border-secondary: rgba(212, 175, 55, .3);--border-light: rgba(212, 175, 55, .2);--border-heavy: rgba(212, 175, 55, .5);--topbar-height: 70px;--left-panel-width: 400px;--right-buttons-width: 90px;--right-panel-width: 350px;--footer-height: 50px;--sidebar-collapsed-width: 60px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 48px;--spacing-3xl: 64px;--spacing-4xl: 80px;--spacing-5xl: 96px;--radius-xs: 4px;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--radius-xl: 20px;--radius-2xl: 28px;--radius-full: 9999px;--font-xs: .75rem;--font-sm: .875rem;--font-base: 1rem;--font-lg: 1.125rem;--font-xl: 1.25rem;--font-2xl: 1.5rem;--font-3xl: 1.875rem;--font-4xl: 2.25rem;--font-5xl: 3rem;--font-thin: 100;--font-light: 300;--font-normal: 400;--font-medium: 500;--font-semibold: 600;--font-bold: 700;--font-extrabold: 800;--font-black: 900;--leading-none: 1;--leading-tight: 1.25;--leading-snug: 1.375;--leading-normal: 1.5;--leading-relaxed: 1.625;--leading-loose: 2;--transition-fast: .15s ease;--transition-normal: .3s ease;--transition-slow: .5s ease;--transition-slower: .7s ease;--transition-bounce: .4s cubic-bezier(.68, -.55, .265, 1.55);--transition-smooth: .3s cubic-bezier(.4, 0, .2, 1);--shadow-xs: 0 1px 2px rgba(0, 0, 0, .2);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .3);--shadow-md: 0 4px 16px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .5);--shadow-xl: 0 12px 32px rgba(0, 0, 0, .6);--shadow-2xl: 0 20px 48px rgba(0, 0, 0, .7);--shadow-inner: inset 0 2px 8px rgba(0, 0, 0, .4);--shadow-gold: 0 4px 20px rgba(212, 175, 55, .4);--shadow-gold-lg: 0 8px 32px rgba(212, 175, 55, .6);--shadow-glow: 0 0 20px rgba(212, 175, 55, .6);--shadow-glow-strong: 0 0 30px rgba(212, 175, 55, .8);--z-base: 1;--z-dropdown: 100;--z-sticky: 200;--z-fixed: 300;--z-modal-backdrop: 400;--z-modal: 500;--z-popover: 600;--z-tooltip: 700;--z-notification: 800;--z-side-panel: 900;--z-buttons: 1000;--z-topbar: 1100;--z-loading: 10000;--z-toast: 10001;--z-debug: 10002;--blur-none: 0;--blur-sm: 4px;--blur-md: 8px;--blur-lg: 12px;--blur-xl: 16px}@media(max-width:480px){:root{--topbar-height: 50px;--left-panel-width: 100vw;--right-buttons-width: 60px;--right-panel-width: 100vw;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 24px;--font-xs: .7rem;--font-sm: .8rem;--font-base: .9rem;--font-lg: 1rem;--font-xl: 1.1rem;--font-2xl: 1.3rem;--font-3xl: 1.6rem}}@media(min-width:481px)and (max-width:768px){:root{--topbar-height: 55px;--left-panel-width: 100vw;--right-buttons-width: 70px;--right-panel-width: 100vw;--spacing-md: 14px;--spacing-lg: 20px;--spacing-xl: 28px}}@media(min-width:769px)and (max-width:1024px){:root{--topbar-height: 60px;--left-panel-width: 350px;--right-buttons-width: 80px;--right-panel-width: 320px}}@media(min-width:1441px){:root{--topbar-height: 80px;--left-panel-width: 450px;--right-buttons-width: 100px;--right-panel-width: 400px}}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;scroll-behavior:smooth}@media(max-width:480px){html{font-size:14px}}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,-apple-system,BlinkMacSystemFont,sans-serif;background:linear-gradient(135deg,#0a0806,#1a1410,#2d2419);background-attachment:fixed;color:var(--color-text);overflow:hidden;height:100vh;height:100dvh;width:100vw;width:100dvw;line-height:var(--leading-normal);position:relative;touch-action:pan-x pan-y}ul,ol{list-style:none}a{text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent}button{background:none;border:none;cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent}input,textarea,select{font-family:inherit;font-size:100%}img{max-width:100%;height:auto;display:block}h1,h2,h3,h4,h5,h6{font-weight:var(--font-bold);line-height:var(--leading-tight);color:var(--color-text-bright)}h1{font-size:var(--font-4xl);margin-bottom:var(--spacing-lg)}h2{font-size:var(--font-3xl);margin-bottom:var(--spacing-md)}h3{font-size:var(--font-2xl);margin-bottom:var(--spacing-md)}h4{font-size:var(--font-xl);margin-bottom:var(--spacing-sm)}p{margin-bottom:var(--spacing-md)}strong{font-weight:var(--font-bold);color:var(--medieval-gold-light)}.app-container{width:100%;height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}.topbar{position:fixed;top:0;left:0;right:0;height:var(--topbar-height);background:linear-gradient(180deg,#1a1410fa,#2d2419fa);backdrop-filter:blur(10px);border-bottom:2px solid var(--medieval-gold-dark);display:flex;align-items:center;justify-content:space-between;padding:0 var(--spacing-lg);z-index:var(--z-topbar);box-shadow:0 4px 12px #00000080}@media(max-width:768px){.topbar{padding:0 var(--spacing-sm)}}.topbar-left,.topbar-center,.topbar-right{flex:1;display:flex;align-items:center}@media(max-width:768px){.topbar-left,.topbar-center,.topbar-right{gap:var(--spacing-sm)}}.topbar-center{justify-content:center}.topbar-right{justify-content:flex-end}.game-title{display:flex;align-items:center;gap:var(--spacing-sm)}.title-icon{font-size:2rem;filter:drop-shadow(0 2px 8px rgba(212,175,55,.6));animation:iconFloat 3s ease-in-out infinite}@media(max-width:480px){.title-icon{font-size:1.5rem}}@keyframes iconFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.title-text{font-size:1.5rem;font-weight:var(--font-bold);color:var(--medieval-gold-light);text-shadow:0 2px 8px rgba(0,0,0,.8);letter-spacing:1px}@media(max-width:768px){.title-text{font-size:1.2rem}}@media(max-width:480px){.title-text{font-size:1rem}}.version-badge{font-size:var(--font-xs);color:var(--color-text-dim);margin-left:var(--spacing-sm);opacity:.7}@media(max-width:480px){.version-badge{display:none}}.resource-display{display:flex;gap:var(--spacing-lg)}@media(max-width:768px){.resource-display{gap:var(--spacing-sm)}}.resource-item{display:flex;align-items:center;gap:var(--spacing-sm);background:#1a1410cc;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-lg);border:2px solid var(--medieval-gold-dark);box-shadow:var(--shadow-inner);transition:all var(--transition-fast)}@media(max-width:768px){.resource-item{padding:var(--spacing-xs) var(--spacing-sm);gap:var(--spacing-xs)}}.resource-item:hover{border-color:var(--medieval-gold);filter:brightness(1.15)}.resource-icon{font-size:1.5rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}@media(max-width:480px){.resource-icon{font-size:1.2rem}}.resource-label{font-size:var(--font-sm);color:var(--color-text-dim);text-transform:uppercase;letter-spacing:.5px;font-weight:var(--font-semibold)}@media(max-width:768px){.resource-label{display:none}}.resource-value{font-size:1.1rem;font-weight:var(--font-bold);color:var(--medieval-gold-light);min-width:80px;text-align:right;font-variant-numeric:tabular-nums}@media(max-width:768px){.resource-value{min-width:50px;font-size:1rem}}@media(max-width:480px){.resource-value{min-width:40px;font-size:.9rem}}.wallet-btn{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-lg);background:linear-gradient(135deg,var(--medieval-gold),var(--medieval-gold-dark));color:var(--medieval-dark);border:2px solid var(--medieval-gold-light);border-radius:var(--radius-lg);font-weight:var(--font-bold);font-size:.95rem;cursor:pointer;transition:all var(--transition-normal);box-shadow:0 4px 12px #d4af3766;min-height:44px}@media(max-width:768px){.wallet-btn{padding:var(--spacing-sm) var(--spacing-md);font-size:.85rem}}.wallet-btn:hover{filter:brightness(1.15);background:linear-gradient(135deg,var(--medieval-gold-light),var(--medieval-gold))}.wallet-btn:active{filter:brightness(.95)}.wallet-icon{font-size:1.3rem}@media(max-width:480px){.wallet-icon{font-size:1.1rem}}.wallet-text{font-size:.95rem;letter-spacing:.3px}@media(max-width:480px){.wallet-text{font-size:.85rem}}.side-panel{position:fixed;top:var(--topbar-height);bottom:0;background:linear-gradient(180deg,#1a1410fa,#2d2419fa);backdrop-filter:blur(10px);transition:transform var(--transition-normal);z-index:var(--z-side-panel);display:flex;flex-direction:column;overflow:hidden}.side-panel.left-panel{left:0;width:var(--left-panel-width);border-right:2px solid var(--medieval-gold-dark);box-shadow:4px 0 20px #00000080;transform:translate(-100%)}.side-panel.left-panel.open{transform:translate(0)}@media(max-width:768px){.side-panel.left-panel{width:100vw;z-index:calc(var(--z-topbar) + 1)}}.left-panel-toggle{position:fixed;left:0;top:50%;transform:translateY(-50%);width:36px;height:60px;background:linear-gradient(135deg,var(--medieval-gold),var(--medieval-gold-dark));border:2px solid var(--medieval-gold-light);border-left:none;border-radius:0 var(--radius-lg) var(--radius-lg) 0;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:calc(var(--z-side-panel) + 1);box-shadow:4px 0 20px #d4af3780;transition:all var(--transition-normal)}.left-panel-toggle:hover{width:40px;box-shadow:4px 0 30px #d4af37cc;background:linear-gradient(135deg,var(--medieval-gold-light),var(--medieval-gold))}.left-panel-toggle.open{left:var(--left-panel-width);transform:translateY(-50%)}@media(max-width:768px){.left-panel-toggle{width:32px;height:50px}.left-panel-toggle.open{left:calc(100vw - 32px)}}.toggle-arrow{font-size:1.4rem;color:var(--medieval-dark);transition:transform var(--transition-normal);filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}@media(max-width:768px){.toggle-arrow{font-size:1.5rem}}.left-panel-toggle:hover .toggle-arrow{filter:brightness(1.2) drop-shadow(0 2px 4px rgba(0,0,0,.3))}.left-panel-toggle.open .toggle-arrow{transform:rotate(180deg)}.left-panel-toggle.open:hover .toggle-arrow{transform:rotate(180deg);filter:brightness(1.2) drop-shadow(0 2px 4px rgba(0,0,0,.3))}.side-panel.right-panel{right:var(--right-buttons-width);width:var(--right-panel-width);border-left:2px solid var(--medieval-gold-dark);box-shadow:-4px 0 20px #00000080;transform:translate(100%);z-index:calc(var(--z-buttons) - 1)}.side-panel.right-panel.open{transform:translate(0)}@media(max-width:768px){.side-panel.right-panel{right:0;width:100vw;z-index:calc(var(--z-topbar) + 1)}}.panel-header{padding:var(--spacing-lg);border-bottom:2px solid var(--medieval-gold-dark);background:#1a1410cc;display:flex;align-items:center;justify-content:space-between;position:relative;min-height:70px;flex-shrink:0;flex-direction:column}.panel-header h2{font-size:1.4rem;word-break:break-word}.panel-header p{font-size:.95rem;line-height:1.6;word-break:break-word}@media(max-width:768px){.panel-header h2{font-size:1.2rem}.panel-header p{font-size:.85rem;line-height:1.5}}@media(max-width:480px){.panel-header{padding:var(--spacing-md);min-height:60px}.panel-header h2{font-size:1.1rem}.panel-header p{font-size:.8rem;line-height:1.4}}.panel-title{font-size:1.4rem;color:var(--medieval-gold-light);font-weight:var(--font-bold);text-align:center;text-shadow:0 2px 8px rgba(0,0,0,.8);letter-spacing:.5px;flex:1;display:flex;align-items:center;gap:var(--spacing-sm)}@media(max-width:480px){.panel-title{font-size:1.2rem}}.panel-close-btn{position:absolute;right:var(--spacing-md);top:50%;transform:translateY(-50%);width:40px;height:40px;background:linear-gradient(135deg,#4a4234e6,#2d2419e6);border:2px solid var(--medieval-gold-dark);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-normal);color:var(--medieval-gold-light);font-size:1.4rem;font-weight:var(--font-bold);min-width:44px;min-height:44px;box-shadow:0 2px 8px #00000080}@media(max-width:480px){.panel-close-btn{width:36px;height:36px}}.panel-close-btn:hover{background:linear-gradient(135deg,var(--medieval-gold-dark),var(--medieval-gold));border-color:var(--medieval-gold-light);color:var(--medieval-dark);transform:translateY(-50%) rotate(90deg);box-shadow:0 4px 16px #d4af3799}.close-icon{line-height:1;display:block}.panel-close{background:linear-gradient(135deg,#4a4234e6,#2d2419e6);border:2px solid var(--medieval-gold-dark);color:var(--medieval-gold-light);width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition-normal);font-size:1.4rem;min-height:44px;min-width:44px;box-shadow:0 2px 8px #00000080}@media(max-width:480px){.panel-close{width:40px;height:40px;font-size:1.2rem}}.panel-close:hover{background:linear-gradient(135deg,var(--medieval-gold-dark),var(--medieval-gold));border-color:var(--medieval-gold-light);color:var(--medieval-dark);transform:rotate(90deg);box-shadow:0 4px 16px #d4af3799}.panel-content{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--spacing-lg);-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y}@media(max-width:768px){.panel-content{padding:var(--spacing-md)}}@media(max-width:480px){.panel-content{padding:var(--spacing-sm)}}.panel-content *{max-width:100%;box-sizing:border-box}.panel-content .stats-row,.panel-content .army-overview,.panel-content .raid-info{display:flex;flex-wrap:wrap;gap:8px}.panel-content .stat-box{flex:1 1 auto;min-width:80px;max-width:100%}@media(max-width:480px){.panel-content .stats-row{gap:6px}.panel-content .stat-box{min-width:70px;padding:8px;font-size:.85em}}.panel-content::-webkit-scrollbar{width:8px}.panel-content::-webkit-scrollbar-track{background:#1a141080}.panel-content::-webkit-scrollbar-thumb{background:var(--medieval-gold-dark);border-radius:var(--radius-full)}.panel-content::-webkit-scrollbar-thumb:hover{background:var(--medieval-gold)}.army-list{scrollbar-width:thin;scrollbar-color:var(--medieval-gold-dark) rgba(26,20,16,.5)}.army-list::-webkit-scrollbar{width:6px;height:6px}.army-list::-webkit-scrollbar-track{background:#1a141080;border-radius:3px}.army-list::-webkit-scrollbar-thumb{background:var(--medieval-gold-dark);border-radius:3px}.army-list::-webkit-scrollbar-thumb:hover{background:var(--medieval-gold)}.tab-nav{display:flex;background:#1a1410cc;border-bottom:2px solid var(--medieval-gold-dark);overflow-x:auto;-webkit-overflow-scrolling:touch}.tab-nav::-webkit-scrollbar{height:4px}.tab-nav::-webkit-scrollbar-track{background:#1a1410cc}.tab-nav::-webkit-scrollbar-thumb{background:var(--medieval-gold-dark);border-radius:2px}.tab-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:var(--spacing-md) var(--spacing-sm);background:transparent;border:none;border-right:1px solid rgba(212,175,55,.2);cursor:pointer;transition:all var(--transition-fast);color:var(--color-text-dim);position:relative;min-width:70px;min-height:70px}@media(max-width:768px){.tab-btn{min-width:60px;padding:var(--spacing-sm) var(--spacing-xs)}}@media(max-width:480px){.tab-btn{min-width:50px;min-height:60px}}.tab-btn:last-child{border-right:none}.tab-btn:after{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--medieval-gold);transform:scaleX(0);transition:transform var(--transition-normal)}.tab-btn:hover{background:#3d352980;color:var(--color-text)}.tab-btn.active{background:#d4af3726;color:var(--medieval-gold-light)}.tab-btn.active:after{transform:scaleX(1)}.tab-icon{font-size:1.5rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));transition:transform var(--transition-fast)}@media(max-width:768px){.tab-icon{font-size:1.3rem}}@media(max-width:480px){.tab-icon{font-size:1.2rem}}.tab-btn:hover .tab-icon{filter:brightness(1.2) drop-shadow(0 2px 4px rgba(0,0,0,.5))}.tab-btn.active .tab-icon{animation:iconPulse 2s ease-in-out infinite}@keyframes iconPulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.tab-label{font-size:var(--font-xs);font-weight:var(--font-semibold);text-transform:uppercase;letter-spacing:.5px}@media(max-width:480px){.tab-label{font-size:.65rem}}.tab-content-container{flex:1;overflow-y:auto;position:relative;background:#1a141080;-webkit-overflow-scrolling:touch}.tab-content-container::-webkit-scrollbar{width:10px}.tab-content-container::-webkit-scrollbar-track{background:#1a1410cc}.tab-content-container::-webkit-scrollbar-thumb{background:var(--medieval-gold-dark);border-radius:5px}.tab-content-container::-webkit-scrollbar-thumb:hover{background:var(--medieval-gold)}.tab-content{display:none;height:100%;animation:fadeIn .3s ease}.tab-content.active{display:block}.tab-content-inner{padding:var(--spacing-lg)}@media(max-width:480px){.tab-content-inner{padding:var(--spacing-md)}}.tab-section-header{background:linear-gradient(135deg,#d4af3740,#b8941f40);border:2px solid var(--medieval-gold);border-radius:var(--radius-lg);padding:var(--spacing-lg);margin-bottom:var(--spacing-xl);text-align:center;box-shadow:0 4px 16px #d4af374d}@media(max-width:480px){.tab-section-header{padding:var(--spacing-md);margin-bottom:var(--spacing-lg)}}.tab-section-icon{font-size:3rem;margin-bottom:var(--spacing-sm);filter:drop-shadow(0 4px 8px rgba(0,0,0,.5));animation:iconBounce 2s ease-in-out infinite}@media(max-width:480px){.tab-section-icon{font-size:2.5rem}}@keyframes iconBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.tab-section-title{font-size:1.5rem;color:var(--color-text-bright);font-weight:var(--font-bold);margin-bottom:var(--spacing-sm);text-shadow:0 2px 8px rgba(0,0,0,.8);letter-spacing:.5px}@media(max-width:480px){.tab-section-title{font-size:1.3rem}}.tab-section-description{font-size:1rem;color:var(--color-text);line-height:var(--leading-relaxed);margin-bottom:var(--spacing-sm)}@media(max-width:480px){.tab-section-description{font-size:.9rem}}.tab-section-note{font-size:.9rem;color:var(--color-text-dim);font-style:italic}@media(max-width:480px){.tab-section-note{font-size:.8rem}}.village-grid,.building-grid,.unit-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--spacing-lg);padding:var(--spacing-md) 0}@media(max-width:768px){.village-grid,.building-grid,.unit-grid{grid-template-columns:1fr;gap:var(--spacing-md);padding:var(--spacing-sm) 0}}@media(min-width:769px)and (max-width:1024px){.village-grid,.building-grid,.unit-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}}.village-card,.building-card,.unit-card{background:linear-gradient(135deg,#1a1410f2,#2d2419f2);border:2px solid var(--medieval-gold-dark);border-radius:var(--radius-xl);padding:var(--spacing-lg);transition:all var(--transition-normal);position:relative;overflow:hidden}@media(max-width:480px){.village-card,.building-card,.unit-card{padding:var(--spacing-md);border-radius:var(--radius-lg)}}.village-card:hover,.building-card:hover,.unit-card:hover{border-color:var(--medieval-gold);filter:brightness(1.1)}.card-header{display:flex;align-items:center;gap:var(--spacing-md);margin-bottom:var(--spacing-md)}@media(max-width:480px){.card-header{gap:var(--spacing-sm)}}.card-icon{font-size:2.5rem;filter:drop-shadow(0 2px 8px rgba(0,0,0,.6))}@media(max-width:480px){.card-icon{font-size:2rem}}.card-info{flex:1}.card-title{font-size:var(--font-lg);font-weight:var(--font-bold);color:var(--medieval-gold-light);margin-bottom:var(--spacing-xs)}@media(max-width:480px){.card-title{font-size:var(--font-base)}}.card-subtitle{font-size:var(--font-sm);color:var(--color-text-dim)}.card-body{margin-bottom:var(--spacing-lg)}.card-description{font-size:var(--font-sm);color:var(--color-text);line-height:var(--leading-relaxed);margin-bottom:var(--spacing-md)}@media(max-width:480px){.card-description{font-size:var(--font-xs)}}.card-stats{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);margin-bottom:var(--spacing-md)}.stat-badge{display:flex;align-items:center;gap:var(--spacing-xs);background:#0000004d;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-md);font-size:var(--font-xs);border:1px solid var(--border-light)}.stat-badge-icon{font-size:1rem}.stat-badge-value{font-weight:var(--font-bold);color:var(--medieval-gold-light)}.card-footer{display:flex;gap:var(--spacing-md)}@media(max-width:480px){.card-footer{flex-direction:column;gap:var(--spacing-sm)}}.btn-primary,.btn-secondary,.btn-action,.btn-danger{padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--radius-md);font-weight:var(--font-bold);font-size:.95rem;cursor:pointer;transition:all var(--transition-normal);text-transform:uppercase;letter-spacing:.5px;border:2px solid;flex:1;display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);position:relative;overflow:hidden;min-height:44px}@media(max-width:768px){.btn-primary,.btn-secondary,.btn-action,.btn-danger{padding:var(--spacing-sm) var(--spacing-md);font-size:.85rem}}.btn-primary:before,.btn-secondary:before,.btn-action:before,.btn-danger:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#fff3;transform:translate(-50%,-50%);transition:width .6s,height .6s}.btn-primary:active:before,.btn-secondary:active:before,.btn-action:active:before,.btn-danger:active:before{width:300px;height:300px}.btn-primary{background:linear-gradient(135deg,var(--medieval-gold),var(--medieval-gold-dark));color:var(--medieval-dark);border-color:var(--medieval-gold-light);box-shadow:0 4px 12px #d4af3766}.btn-primary:hover:not(:disabled){background:linear-gradient(135deg,var(--medieval-gold-light),var(--medieval-gold));filter:brightness(1.15)}.btn-primary:active:not(:disabled){filter:brightness(.95)}.btn-primary:disabled{opacity:.5;cursor:not-allowed;background:linear-gradient(135deg,var(--medieval-stone),var(--medieval-brown));color:var(--color-text-dim);border-color:var(--medieval-stone)}.btn-secondary{background:#1a1410e6;color:var(--color-text);border-color:var(--medieval-stone)}.btn-secondary:hover:not(:disabled){background:#3d3529e6;border-color:var(--medieval-gold-dark);filter:brightness(1.15)}.btn-action{background:linear-gradient(135deg,#4ade80,#22c55e);color:#fff;border-color:#86efac;box-shadow:0 4px 12px #4ade8066}.btn-action:hover:not(:disabled){background:linear-gradient(135deg,#86efac,#4ade80);filter:brightness(1.15)}.btn-danger{background:linear-gradient(135deg,var(--color-danger),#dc2626);color:#fff;border-color:#fca5a5;box-shadow:0 4px 12px #ef444466}.btn-danger:hover:not(:disabled){background:linear-gradient(135deg,#dc2626,#b91c1c);filter:brightness(1.15)}.btn-icon-text{font-size:1.2rem}.btn-locked{opacity:.5;cursor:not-allowed!important;background:linear-gradient(135deg,var(--medieval-stone),var(--medieval-brown))!important;color:var(--color-text-dim)!important;border-color:var(--medieval-stone)!important;position:relative}.btn-locked:after{content:"🔒";position:absolute;top:50%;right:10px;transform:translateY(-50%);font-size:1rem}.btn-locked:hover{transform:none!important;box-shadow:none!important}.right-side-buttons{position:fixed;right:0;top:var(--topbar-height);bottom:0;width:var(--right-buttons-width);background:linear-gradient(180deg,#1a1410fa,#2d2419fa);backdrop-filter:blur(10px);border-left:2px solid var(--fire-dark);display:flex!important;flex-direction:column!important;align-items:center;gap:12px;padding:12px 6px 16px;z-index:var(--z-buttons);box-shadow:-4px 0 20px #00000080;pointer-events:all!important;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}@media(max-width:900px){.right-side-buttons{width:70px;gap:8px;padding-top:8px;padding-left:4px;padding-right:4px}}@media(max-width:768px){.right-side-buttons{top:calc(var(--topbar-height) + 25px);width:58px;gap:6px;padding:10px 3px 20px;max-height:calc(100vh - var(--topbar-height) - 50px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--medieval-gold-dark) rgba(26,20,16,.5)}.right-side-buttons::-webkit-scrollbar{width:6px}.right-side-buttons::-webkit-scrollbar-track{background:#1a141080;border-radius:3px}.right-side-buttons::-webkit-scrollbar-thumb{background:var(--medieval-gold-dark);border-radius:3px}.right-side-buttons::-webkit-scrollbar-thumb:hover{background:var(--medieval-gold)}}@media(max-width:480px){.right-side-buttons{top:calc(var(--topbar-height) + 25px);width:48px;gap:4px;padding:8px 2px 20px;max-height:calc(100vh - var(--topbar-height) - 50px)}}@media(max-height:550px){.right-side-buttons{gap:3px;padding-top:4px;padding-bottom:16px;max-height:calc(100vh - var(--topbar-height) - 40px)}}.btn-separator{width:60%;height:2px;background:var(--medieval-gold-dark);margin:var(--spacing-sm) 0}.side-btn-round{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--fire-orange),var(--fire-red));border:2px solid var(--fire-light);cursor:pointer;transition:all var(--transition-normal);display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#fff;box-shadow:0 4px 12px #ff6b3580;position:relative;z-index:var(--z-buttons);flex-shrink:0}@media(max-width:900px){.side-btn-round{width:54px;height:54px}}@media(max-width:768px){.side-btn-round{width:46px;height:46px;border-width:2px}}@media(max-width:480px){.side-btn-round{width:40px;height:40px;border-width:1px}}@media(max-height:550px){.side-btn-round{width:38px;height:38px}}.side-btn-round:before{content:"";position:absolute;inset:-5px;border-radius:50%;background:radial-gradient(circle,rgba(255,107,53,.3),transparent 70%);opacity:0;transition:opacity var(--transition-normal)}.side-btn-round:hover{filter:brightness(1.15);border-color:#fff}.side-btn-round:hover:before{opacity:1}.side-btn-round.active{background:linear-gradient(135deg,var(--medieval-gold),var(--medieval-gold-dark));border-color:var(--medieval-gold-light);box-shadow:0 6px 20px #d4af37cc}.side-btn-round:active{filter:brightness(.95)}.btn-icon{font-size:1.8rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6));transition:transform var(--transition-fast)}@media(max-width:768px){.btn-icon{font-size:1.4rem}}@media(max-width:480px){.btn-icon{font-size:1.2rem}}.side-btn-round:hover .btn-icon{filter:brightness(1.2) drop-shadow(0 2px 4px rgba(0,0,0,.6))}.btn-label{font-size:.7rem;font-weight:var(--font-bold);text-transform:uppercase;letter-spacing:.5px}@media(max-width:768px){.btn-label{font-size:.6rem}}@media(max-width:480px){.btn-label{display:none}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.hidden{display:none!important}.visible{display:block!important}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-dim{opacity:.6}.text-warning{color:var(--color-warning)}.mt-sm{margin-top:var(--spacing-sm)}.mt-md{margin-top:var(--spacing-md)}.mt-lg{margin-top:var(--spacing-lg)}.mb-sm{margin-bottom:var(--spacing-sm)}.mb-md{margin-bottom:var(--spacing-md)}.mb-lg{margin-bottom:var(--spacing-lg)}@media(prefers-contrast:high){.village-card,.building-card,.unit-card,.btn-primary,.btn-secondary,.btn-action,.btn-danger{border-width:3px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}:focus-visible{outline:3px solid var(--medieval-gold);outline-offset:2px}.genesis-badge{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,#d4af3766,#b8941f66);border:2px solid var(--medieval-gold);border-radius:var(--radius-md);padding:8px 16px;font-size:.9rem;font-weight:var(--font-bold);color:var(--color-text-bright);text-transform:uppercase;letter-spacing:.5px;box-shadow:0 4px 12px #d4af3780;animation:genesisPulse 2s ease-in-out infinite;margin-top:var(--spacing-sm)}@keyframes genesisPulse{0%,to{box-shadow:0 4px 12px #d4af3780}50%{box-shadow:0 6px 20px #d4af37e6}}.info-box{background:#60a5fa26;border:2px solid var(--color-info);border-radius:var(--radius-md);padding:var(--spacing-md);margin-bottom:var(--spacing-lg);display:flex;align-items:flex-start;gap:var(--spacing-sm)}.info-box.warning{background:#fbbf2426;border-color:var(--color-warning)}.info-box.success{background:#4ade8026;border-color:var(--color-success)}.info-box.danger{background:#ef444426;border-color:var(--color-danger)}.info-box-icon{font-size:1.5rem;flex-shrink:0}@media(max-width:480px){.info-box-icon{font-size:1.2rem}}.info-box-text{font-size:.95rem;color:var(--color-text);line-height:var(--leading-relaxed)}@media(max-width:480px){.info-box-text{font-size:.85rem}}.coming-soon-banner{background:#fbbf2433;border:2px solid var(--color-warning);border-radius:var(--radius-md);padding:var(--spacing-md);text-align:center;margin-bottom:var(--spacing-lg)}.coming-soon-text{font-size:.95rem;color:var(--color-text);font-weight:var(--font-semibold)}.loading-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-3xl);text-align:center}@media(max-width:480px){.loading-placeholder{padding:var(--spacing-2xl)}}.loading-spinner{font-size:3rem;animation:spin 2s linear infinite}@media(max-width:480px){.loading-spinner{font-size:2rem}}.loading-text{font-size:1.1rem;color:var(--medieval-gold-light);margin-top:var(--spacing-md);font-weight:var(--font-semibold)}@media(max-width:480px){.loading-text{font-size:1rem}}.building-instances{margin-top:16px;padding:12px;background:#0003;border-radius:8px;border:1px solid rgba(255,255,255,.1)}.instances-header{font-size:14px;font-weight:600;color:gold;margin-bottom:10px;text-transform:uppercase;letter-spacing:.5px}.instance-row{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;margin-bottom:6px;background:#0000004d;border-radius:6px;border:1px solid rgba(255,255,255,.05)}.instance-row:last-child{margin-bottom:0}.instance-row:hover{background:#0006;border-color:#ffd70033}.instance-name{font-size:13px;color:#e0e0e0;font-weight:500}.instance-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end;flex:1;max-width:70%}.btn-action-small{padding:4px 12px;font-size:12px;background:linear-gradient(135deg,#4a9eff,#2563eb);border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.btn-action-small:hover:not(:disabled){background:linear-gradient(135deg,#5ab0ff,#3b82f6);border-color:#ffffff4d;filter:brightness(1.15)}.btn-action-small:active:not(:disabled){filter:brightness(.95)}.btn-action-small:disabled,.btn-action-small.disabled{background:#6464644d;border-color:#ffffff1a;color:#fff6;cursor:not-allowed;opacity:.6}.badge-max{padding:4px 12px;font-size:11px;background:#22c55e33;border:1px solid rgba(34,197,94,.4);color:#22c55e;border-radius:4px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}.badge-current{padding:4px 10px;font-size:11px;background:linear-gradient(135deg,gold,#ff8c00);border:1px solid rgba(255,215,0,.5);color:#000;border-radius:4px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}.badge-completed{padding:4px 10px;font-size:11px;background:#22c55e33;border:1px solid rgba(34,197,94,.4);color:#22c55e;border-radius:4px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}.badge-next{padding:4px 10px;font-size:11px;background:#3b82f633;border:1px solid rgba(59,130,246,.4);color:#3b82f6;border-radius:4px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}.badge-locked{padding:4px 10px;font-size:11px;background:#64646433;border:1px solid rgba(100,100,100,.4);color:#888;border-radius:4px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}.badge-complete{padding:6px 14px;font-size:12px;background:#22c55e33;border:1px solid rgba(34,197,94,.4);color:#22c55e;border-radius:6px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}.village-card.completed,.building-card.completed{opacity:.7;border-color:#22c55e4d}.village-card.locked,.building-card.locked{opacity:.5;filter:grayscale(50%);pointer-events:none}.village-card.locked .btn-action,.building-card.locked .btn-action{cursor:not-allowed;opacity:.5}.text-dim{color:#888;font-size:13px;font-style:italic}@media(max-width:768px){.instance-row{flex-direction:column;align-items:flex-start;gap:8px}.instance-actions{width:100%;justify-content:flex-start}.btn-action-small{flex:1;min-width:100px}}.docs-close-btn{position:absolute;top:10px;right:10px;background:#ef4444e6;color:#fff;border:2px solid rgba(255,255,255,.3);border-radius:50%;width:36px;height:36px;font-size:1.5rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:1001;transition:all .2s ease;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.docs-close-btn:hover{background:#ef4444;filter:brightness(1.15)}.docs-close-btn:active{transform:scale(.95)}@media(max-width:768px){.docs-close-btn{width:48px;height:48px;font-size:2rem;top:8px;right:8px}}@media(max-width:480px){.docs-close-btn{width:52px;height:52px;font-size:2.2rem}}