@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700&family=Merriweather:wght@300;700&display=swap');
    
    :root {
        /* Default Background */
        --bg-color: #2b2520;
        --bg-image: url('https://aoe.rothenb.ch/backgrounds/wood-pattern.png');
        /* AoE II Palette */
        --aoe-gold: #fcd144;
        --aoe-dark: #1a120c;
        --aoe-border-light: #7d5e41;
        --aoe-border-dark: #2d2116;
        --aoe-panel-bg: rgba(20, 15, 10, 0.85);

        /* Old semantic vars mapped for compatibility if needed */
        --red: #ff3333;
        --green: #2e8b57;

        -webkit-tap-highlight-color: transparent;
    }

    body { margin: 0; font-family: 'Merriweather', serif; background-color: var(--bg-color); background-image: var(--bg-image); color: #f5eedc; padding-bottom: 80px; transition: background 0.5s ease; box-sizing: border-box;}
    * { box-sizing: inherit; }
    h1, h2, h3, h4, h5, h6 { font-family: 'Cinzel', serif; color: var(--aoe-gold); margin: 0 0 10px 0; text-shadow: 2px 2px 2px #000; }
    h2 { font-size: 16px; text-align: center; }
    h3 { font-size: 14px; text-align: center; border-bottom: 1px solid #3a2e24; padding-bottom: 5px; margin-bottom: 15px; }
    p { margin-bottom: 10px; line-height: 1.4; }
    
    /* Utility Classes */
    .text-center { text-align: center; }
    .text-left { text-align: left; }
    .mt-1 { margin-top: 10px; }
    .mt-2 { margin-top: 20px; }
    .flex-between { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
    .w-100 { width: 100%; }

    /* Form Controls */
    .form-group { margin-bottom: 15px; }
    .form-group label { display: block; margin-bottom: 5px; font-family: 'Cinzel', serif; color: #e6d3a8; font-size: 12px;}
    .form-control { 
        width: 100%; padding: 8px; 
        background: rgba(0,0,0,0.5); border: 1px solid var(--aoe-border-light);
        color: #fff; font-family: 'Merriweather', serif; box-shadow: inset 2px 2px 5px rgba(0,0,0,0.8);
    }
    .form-control:focus { outline: 1px solid var(--aoe-gold); }
    .form-control[disabled] { background: rgba(50,50,50,0.5); color: #888; }
    
    /* AoE II Beveled Header */
    .header { 
        display: flex; justify-content: space-around; padding: 12px 5px; 
        background: linear-gradient(to bottom, #3a2e24, #1a120c); 
        border-bottom: 3px solid #000; box-shadow: 0 4px 10px rgba(0,0,0,0.8), inset 0 2px 2px rgba(255,255,255,0.1); 
        position: sticky; top: 0; z-index: 100; 
    }
	
    /* Resources */
    .res-group { display: flex; flex-direction: column; align-items: center; cursor: pointer; user-select: none; transition: transform 0.1s ease; }
    .res-group:active { transform: scale(0.9); }
    .res-icon { 
        font-size: 14px; margin-bottom: 4px; background: #000; border: 1px solid var(--aoe-border-light); 
        padding: 4px; border-radius: 2px; box-shadow: inset 1px 1px 3px rgba(0,0,0,0.8);
    }
	
    .res-icon-frame { 
        width: 32px; height: 32px; background: #000; border: 1px solid var(--aoe-border-light); 
        padding: 4px; border-radius: 2px; box-shadow: inset 1px 1px 3px rgba(0,0,0,0.8);
        display: flex; align-items: center; justify-content: center;
    }
    /* SVG Icon Styling */
    .res-icon-frame img { width: 100%; height: 100%; } /* Inverts black icons to white ... filter: invert(1);  */
	
    .res-val { font-family: 'Cinzel', serif; font-weight: bold; font-size: 18px; color: #fff; text-shadow: 1px 1px 0 #000; }
    .res-desc { font-size: 10px; color: #bca07e; text-transform: uppercase; margin-top: 2px; letter-spacing: 0.5px; font-weight: bold;}

    /* Theme Switcher Button in Header (Admin or specific pages if needed) */
    .theme-toggle { position: absolute; right: 10px; top: 10px; width: 24px; font-size: 20px; cursor: pointer; color: var(--aoe-gold); text-shadow: 1px 1px #fff; transition: 0.2s;}
    .theme-toggle:active { transform: rotate(45deg); }

    /* Grid & AoE II Stone/Wood Panels */
    .grid-container { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding: 15px; max-width: 600px; margin: 0 auto; }
    
    .aoe-panel, .parchment-card { 
        background: var(--aoe-panel-bg); backdrop-filter: blur(8px); 
        border: 2px solid #000; outline: 1px solid var(--aoe-border-light); outline-offset: -3px;
        padding: 15px; text-align: center; box-shadow: inset 0 0 15px rgba(0,0,0,0.8), 2px 2px 5px rgba(0,0,0,0.5);
        margin: 15px auto; max-width: 600px; width: calc(100% - 30px);
    }
    .tile-full { grid-column: 1 / -1; text-align: left; }
    .tile-clickable { cursor: pointer; transition: transform 0.1s ease, filter 0.2s ease; }
    .tile-clickable:active { transform: scale(0.97); filter: brightness(1.2); }
    .val { font-size: 24px; color: #fff; font-family: 'Cinzel', serif; text-shadow: 2px 2px 2px #000; }

    /* Active Tasks List */
    .task-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; border-bottom: 1px solid #3a2e24; padding-bottom: 12px; }
    .task-row:last-child { margin-bottom: 0; border-bottom: none; padding-bottom: 0; }
    .task-info { flex-grow: 1; margin-right: 15px; }
    .task-name { font-size: 13px; color: #e6d3a8; margin-bottom: 8px; font-family: 'Cinzel', serif;}
    
    .progress-bg { background: #000; height: 10px; overflow: hidden; border: 1px solid var(--aoe-border-light); box-shadow: inset 1px 1px 3px rgba(0,0,0,0.8);}
    .progress-bar { background: linear-gradient(90deg, #990000, #ff3333); height: 100%; width: 0%; box-shadow: inset 0 2px 2px rgba(255,255,255,0.3); }
    
    /* Authentic AoE II Buttons */
    .aoe-btn, .btn { 
        background: linear-gradient(to bottom, #503d2e, #2d2116);
        border: 2px solid #000;
        outline: 1px solid var(--aoe-border-light);
        outline-offset: -2px; width: 100%; display: block; box-sizing: border-box; text-align: center;
        color: var(--aoe-gold); font-family: 'Cinzel', serif; padding: 10px; cursor: pointer; font-weight: bold; 
        text-shadow: 1px 1px 1px #000; white-space: nowrap; transition: 0.1s; text-decoration: none;
        box-shadow: inset 1px 1px 1px rgba(255,255,255,0.2), inset -1px -1px 2px rgba(0,0,0,0.5);
    }
    .aoe-btn:active, .aoe-btn.working, .btn:active { 
        background: linear-gradient(to bottom, #1a120c, #2d2116);
        box-shadow: inset 2px 2px 5px rgba(0,0,0,0.8); outline: 1px solid var(--aoe-border-dark); color: #aaa; transform: translateY(1px);
    }
    .aoe-btn.done {
        background: linear-gradient(to bottom, #2e8b57, #1a4d30); color: #fff;
    }
    .aoe-btn[disabled], .btn[disabled] { filter: grayscale(1); opacity: 0.5; pointer-events: none; }
    .btn-small { padding: 8px 12px; font-size: 11px; width: auto; display: inline-block; }
    .btn-red { background: linear-gradient(to bottom, #8a1a1a, #4a0d0d); color: #fff;}
    .btn-red:active { background: linear-gradient(to bottom, #4a0d0d, #2a0505); color: #ccc;}

    /* FAB Refresh */
    .fab { 
        position: fixed; bottom: 20px; width: 55px; height: 55px; border-radius: 50%; 
        background: linear-gradient(to bottom, #503d2e, #2d2116);
        border: 2px solid #000; outline: 2px solid var(--aoe-border-light); outline-offset: -4px;
        color: var(--aoe-gold); font-size: 24px; display: flex; justify-content: center; align-items: center; 
        box-shadow: 0 4px 10px rgba(0,0,0,0.8); cursor: pointer; z-index: 99; text-decoration: none; transition: transform 0.4s ease; text-shadow: 1px 1px #000;
    }
    .fab.spin { transform: rotate(360deg) scale(0.9); }
	
	.right-fab {right: 20px;}
	.left-fab {left: 20px;}
	
    /* Smooth Modals */
    .modal-overlay { 
        display: flex; position: fixed; top: 0; left: 0; right: 0; bottom: 0; 
        background: rgba(0,0,0,0.8); z-index: 200; justify-content: center; align-items: center; 
        opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease;
    }
    .modal-overlay.active { opacity: 1; visibility: visible; }
    
    .modal-content { 
        width: 85%; max-width: 380px; text-align: center; padding: 20px;
        transform: scale(0.95); transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1);
    }
    .modal-overlay.active .modal-content { transform: scale(1); }
    
    /* Theme Grid */
    .theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 15px; }
    .theme-btn { 
        height: 60px; border: 2px solid #000; outline: 1px solid var(--aoe-border-light); outline-offset: -2px;
        cursor: pointer; display: flex; align-items: center; justify-content: center; 
        font-family: 'Cinzel', serif; font-size: 10px; font-weight: bold; color: #fff; text-shadow: 1px 1px 2px #000;
        transition: transform 0.1s; background-color: #333; background-size: cover; background-position: center;
    }
    .theme-btn:active { transform: scale(0.95); }

    /* Pulse */
    .pulse { animation: pulseAnim 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
    @keyframes pulseAnim { 50% { transform: scale(1.15); color: #fff; } }

    /* Inventory Grid for backward compatibility styling */
    .inventory-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    
    .toast {
      position: fixed;
      top: 20px; left: 50%;
      transform: translateX(-50%) translateY(-20px);
      background: var(--aoe-panel-bg);
      border: 1px solid var(--aoe-gold);
      border-left: 5px solid var(--aoe-gold);
      color: #fff;
      padding: 10px 20px; font-family: 'Cinzel', serif;
      border-radius: 4px; box-shadow: 0 4px 10px rgba(0,0,0,0.8);
      z-index: 1000;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }
    .toast.show {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }