:root { /* Existing variables retained */ --bg: #1a0d2b; --panel: #0e1627; --card: #2b1a47; --muted: #b8a4d2; --accent: #a100a1; --glass: rgba(161, 0, 161, 0.1); --glass-2: rgba(161, 0, 161, 0.05); --text: #e6d7f8; --button-text: #2b0047; --radius: 12px; --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace; --repeat-gradient: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 48px); --font-family: 'Inter', ui-sans-serif, system-ui, Segoe UI, Roboto, Helvetica, Arial; } /* Light Theme */ [data-theme="light"] { --bg: #f0f4f8; --card: #ffffff; --muted: #6b7280; --accent: #10b981; --glass: rgba(0, 0, 0, 0.05); --glass-2: rgba(0, 0, 0, 0.03); --text: #1f2937; --button-text: #ffffff; } /* Minecraft Nether Theme */ [data-theme="nether"] { --bg: #2f0b0b; --card: #3f1616; --muted: #d4a29a; --accent: #e25822; --glass: rgba(255, 69, 0, 0.1); --glass-2: rgba(255, 69, 0, 0.05); --text: #f4d7d3; --button-text: #3f1208; } /* Minecraft Dark Theme */ [data-theme="end"] { --bg: #071021; --card: #0e1627; --muted: #b0b8c4; --accent: #36b37e; --glass: rgba(255, 255, 255, 0.1); --glass-2: rgba(255, 255, 255, 0.02); --text: #e6eef6; --button-text: #042018; } /* Base */ * { box-sizing: border-box; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } /* Font Classes */ .font-default { font-family: var(--font-family); } .font-pressstart { font-family: 'Press Start 2P', cursive; font-size: clamp(14px, 2.5vw, 16px); } .font-vt323 { font-family: 'VT323', monospace; font-size: clamp(16px, 2.8vw, 18px); } body { background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 100%); color: var(--text); font-family: var(--font-family); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; margin: 0; } a { text-decoration: none; color: var(--text); /* Changed from --font-color to --text for consistency */ } /* Layout */ .wrap { width: 100%; max-width: 1400px; /* Increased slightly for larger screens */ margin: 0 auto; display: grid; grid-template-columns: 1fr minmax(320px, 480px); /* Adjusted for better scaling */ gap: clamp(12px, 2vw, 16px); min-width: 0; padding: 0 clamp(12px, 2vw, 16px); } /* .app & panels */ .app { display: flex; flex-direction: column; gap: clamp(12px, 2vw, 16px); } .app h2 { margin: 0; font-size: clamp(16px, 2.5vw, 18px); } .panel { background: linear-gradient(180deg, var(--card), var(--card)); border-radius: var(--radius); padding: clamp(12px, 2vw, 16px); border: 1px solid var(--glass); box-shadow: 0 6px 18px rgba(2, 6, 23, 0.6); min-width: 0; } label { display: block; font-size: clamp(12px, 1.8vw, 13px); margin-bottom: 8px; color: var(--muted); } /* Flex and Grid Containers */ .row, .enchant-row, .grid, .panel > div { display: flex; gap: clamp(8px, 1.5vw, 12px); align-items: center; flex-wrap: wrap; min-width: 0; } .row > *, .enchant-row > *, .grid > * { min-width: 0; } /* Controls */ input[type="text"], input[type="number"], textarea, select { width: 100%; padding: clamp(8px, 1.5vw, 10px); border-radius: 8px; border: 1px solid var(--glass); background: transparent; color: var(--text); font-size: clamp(14px, 2vw, 16px); /* Larger font for accessibility */ min-height: 44px; min-width: 0; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 2px; /* Better visibility for focus states */ } .controls { display: flex; gap: clamp(6px, 1vw, 8px); margin-top: clamp(10px, 1.5vw, 12px); flex-wrap: wrap; } button { background: linear-gradient(180deg, var(--accent), var(--accent)); border: none; color: var(--button-text); padding: clamp(8px, 1.5vw, 10px) clamp(12px, 2vw, 16px); border-radius: 10px; font-weight: 600; cursor: pointer; min-height: 44px; min-width: 44px; font-size: clamp(14px, 2vw, 16px); } button.ghost { background: transparent; border: 1px solid var(--glass); color: var(--muted); } button:hover { opacity: 0.95; transform: scale(1.01); } button:focus { outline: 2px solid var(--accent); outline-offset: 2px; } /* Lists, Tags, Previews */ .list { margin-top: clamp(10px, 1.5vw, 12px); } .tag { display: inline-flex; padding: clamp(6px, 1vw, 8px) clamp(8px, 1.5vw, 10px); border-radius: 8px; background: var(--glass-2); border: 1px solid var(--glass); margin: clamp(4px, 0.8vw, 6px) clamp(4px, 0.8vw, 6px) 0 0; align-items: center; } .tag button { background: transparent; border: 0; color: var(--muted); cursor: pointer; margin-left: 8px; font-size: clamp(12px, 1.8vw, 14px); } pre { background: var(--glass-2); padding: clamp(10px, 1.5vw, 12px); border-radius: 10px; overflow-x: auto; white-space: pre-wrap; word-break: break-word; font-family: var(--mono); font-size: clamp(12px, 1.8vw, 13px); border: 1px solid var(--glass); max-width: 100%; min-width: 0; } /* Right Column */ .right { position: sticky; top: clamp(12px, 2vw, 16px); } /* Misc */ .meta { display: flex; gap: clamp(6px, 1vw, 8px); flex-wrap: wrap; } .foot { display: flex; justify-content: space-between; gap: clamp(8px, 1.5vw, 12px); align-items: center; margin-top: clamp(10px, 1.5vw, 12px); } .small-btn { padding: clamp(6px, 1vw, 8px) clamp(10px, 1.5vw, 12px); border-radius: 8px; min-height: 36px; } .muted { color: var(--muted); } .badge { background: rgba(var(--accent-rgb, 61, 220, 132), 0.12); color: var(--accent); padding: clamp(4px, 0.8vw, 6px) clamp(6px, 1vw, 8px); border-radius: 8px; font-weight: 600; } .theme-switcher { display: flex; align-items: center; gap: clamp(6px, 1vw, 8px); } .theme-switcher select { width: clamp(140px, 20vw, 160px); } /* Form Microstyles */ .grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.5vw, 12px); align-items: baseline; } .enchant-row { display: grid; grid-template-columns: 3fr 1fr 1fr 1fr; } .enchant-list { max-height: 220px; overflow-y: auto; padding: clamp(6px, 1vw, 8px); border-radius: 8px; border: 1px dashed var(--glass); -webkit-overflow-scrolling: touch; } .muted-box { background: var(--glass-2); padding: clamp(6px, 1vw, 8px); border-radius: 8px; border: 1px solid var(--glass); } .item-preview { width: clamp(48px, 8vw, 56px); height: clamp(48px, 8vw, 56px); border-radius: 8px; border: 1px solid var(--glass); display: flex; align-items: center; justify-content: center; font-weight: 700; font-family: var(--mono); background: var(--glass-2); } /* Search Dropdown */ .search { position: relative; width: 100%; } .search-results { position: absolute; left: 0; right: 0; max-height: 200px; overflow-y: auto; background: var(--card); border: 1px solid var(--glass); z-index: 50; margin-top: 6px; padding: clamp(4px, 0.8vw, 6px); border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); -webkit-overflow-scrolling: touch; } .search-results div { padding: clamp(6px, 1vw, 8px); border-radius: 6px; cursor: pointer; color: var(--text); } .search-results div:hover, .search-results div:focus { background: var(--glass); } .enchant-attributes { background-color: var(--card); height: 35px; border-style: solid; border-color: var(--glass); border-radius: 10px; } .hide-enchants { margin-top:12px;display:flex;gap:8px;align-items:center; } /* Draggable Feedback */ .draggable { cursor: grab; } .drag-over { outline: 2px dashed var(--accent); } .flash { animation: flash 240ms ease; } @keyframes flash { from { box-shadow: 0 0 0 6px rgba(var(--accent-rgb, 61, 220, 132), 0.06); } to { box-shadow: none; } } /* Main Content */ .center { width: 100%; margin:5px auto; padding: clamp(20px, 5vw, 40px) clamp(12px, 2vw, 20px); } /* About Hero */ .about-hero { text-align: center; padding: clamp(5px, 2vw, 10px) clamp(12px, 2vw, 20px); background: var(--repeat-gradient); } .about-hero h1 { font-size: clamp(1.5rem, 4vw, 2rem); margin-bottom: clamp(12px, 2vw, 20px); width: 100%; } .about-hero p { font-size: clamp(0.9rem, 2.5vw, 1.1rem); max-width: 600px; margin: 0 auto clamp(16px, 3vw, 30px); color: var(--muted); } /* SEO Section */ #description-module { width: 100%; max-width: 1400px; margin: clamp(20px, 5vw, 40px) auto; background: var(--bg); padding: clamp(12px, 2vw, 20px); } #description-module h2, #description-module h1 { text-align: center; color: var(--text); font-size: clamp(1.5rem, 3vw, 2rem); } #description-module .guide-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(16px, 3vw, 32px); margin: clamp(16px, 3vw, 24px) 0; } #description-module .tutorial-section, #description-module .usage-section, #description-module .faq-section { margin: clamp(16px, 3vw, 24px) 0; } #description-module .tutorial-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(12px, 2vw, 16px); } .description-subhead { text-align: center; margin-top: clamp(8px, 1.5vw, 10px); color: var(--text); font-size: clamp(1.2rem, 2.5vw, 1.5rem); } #description-module .tutorial-card { background: var(--card); border: 1px solid var(--glass); border-radius: 8px; padding: clamp(12px, 2vw, 16px); text-align: center; } #description-module .tutorial-card h4 { margin: 0 0 clamp(8px, 1.5vw, 12px); color: var(--text); } #description-module .tip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 2vw, 16px); } #description-module .tip-card { background: var(--card); border: 1px solid var(--glass); border-radius: 8px; padding: clamp(10px, 1.5vw, 12px); color: var(--text); font-size: clamp(0.85rem, 2vw, 0.95rem); } #description-module .faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 2vw, 16px); } #description-module .guide-section { margin: clamp(12px, 2vw, 16px) 0; border: 1px solid var(--glass); border-radius: 8px; transition: box-shadow 0.3s ease; } #description-module .guide-section:hover, #description-module .guide-section:focus-within { box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2); } #description-module summary { padding: clamp(12px, 2vw, 16px); font-size: clamp(1rem, 2vw, 1.2rem); font-weight: 600; color: var(--text); background: var(--card); cursor: pointer; border-radius: 8px; transition: background 0.3s ease; } #description-module summary:hover, #description-module summary:focus { background: #1a263a; } #description-module .guide-content { padding: clamp(12px, 2vw, 20px); background: var(--card); border-radius: 0 0 8px 8px; color: var(--text); } .examples-section { margin: clamp(20px, 5vw, 40px) 0; } .examples-intro { text-align: center; margin-bottom: clamp(12px, 2vw, 20px); font-size: clamp(0.9rem, 2vw, 1rem); color: var(--muted); } .examples-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(12px, 2vw, 20px); } .example-card { background: var(--card); border: 1px solid var(--glass); border-radius: 8px; padding: clamp(12px, 2vw, 16px); display: flex; flex-direction: column; gap: clamp(6px, 1vw, 8px); } .example-card h4 { margin: 0; color: var(--text); font-size: clamp(1rem, 2vw, 1.1rem); } .example-card p { margin: 0; font-size: clamp(0.85rem, 2vw, 0.95rem); color: var(--muted); } .example-card code { background: #1a263a; padding: clamp(4px, 1vw, 6px) clamp(8px, 1.5vw, 10px); border-radius: 6px; font-size: clamp(0.8rem, 1.8vw, 0.85rem); word-break: break-all; color: #e6f1ff; white-space: pre-wrap; display: block; } .cta-buttons { display: flex; gap: clamp(12px, 2vw, 16px); justify-content: center; flex-wrap: wrap; } .cta-button { padding: clamp(10px, 1.5vw, 12px) clamp(16px, 2.5vw, 24px); font-size: clamp(1rem, 2vw, 1.1rem); font-weight: 600; color: var(--text); background: var(--accent); border: none; border-radius: 6px; cursor: pointer; transition: background 0.3s ease, transform 0.2s ease; } .cta-button:hover, .cta-button:focus { transform: translateY(-5px); box-shadow: 0 5px 15px var(--glass); } .cta-button.secondary { background: var(--card); border: 1px solid var(--glass); color: var(--text); } .copy-code { display: block; background: #0f1724; color: #ffffff; padding: clamp(8px, 1.5vw, 12px); border-radius: 6px; cursor: pointer; transition: background 0.2s ease; position: relative; user-select: all; } .copy-code.copied { background: #071021; color: #36b37e; } .copy-code::after { display: flex; align-items: center; justify-content: center; content: "Copied!"; font-size: clamp(12px, 2vw, 14px); transform: translateY(-50%); opacity: 0; font-weight: bold; transition: opacity 0.2s ease; } .copy-code.copied::after { opacity: 1; } .edition { display: grid; grid-template-columns: repeat(6, 1fr); align-items: baseline; } .target { display:flex;gap:12px;flex-wrap:wrap;margin-top:12px; } .item { flex:1;min-width:260px; } .lore { display: grid; grid-template-columns: repeat(2, 1fr); align-items: baseline; } /* Responsive Rules */ /* Large Tablets and Small Desktops (1024px and below) */ @media (max-width: 1024px) { .wrap { grid-template-columns: 1fr; } .right { position: static; order: 2; margin-top: clamp(12px, 2vw, 16px); width: 100%; } .footer-columns { grid-template-columns: 1fr; } #description-module .guide-grid { grid-template-columns: 1fr; } #description-module .tip-grid { grid-template-columns: repeat(2, 1fr); } } /* Tablets (768px and below) */ @media (max-width: 768px) { .nav-toggle { display: block; background: none; border: none; color: var(--text); cursor: pointer; padding: clamp(6px, 1vw, 8px); z-index: 1100; } .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--card); border: 1px solid var(--glass); border-radius: 8px; padding: clamp(8px, 1.5vw, 12px); min-height: 100px; box-sizing: border-box; z-index: 1000; } .nav.active { display: block !important; } .nav ul { flex-direction: column; gap: clamp(8px, 1.5vw, 12px); } .has-submenu > a::after { content: " ▼"; font-size: 0.8rem; } .has-submenu.open .submenu { display: block; position: relative; border: none; background: transparent; padding-left: clamp(12px, 2vw, 16px); } #description-module .tutorial-grid, #description-module .faq-grid { grid-template-columns: 1fr; } #description-module .tip-grid { grid-template-columns: 1fr; } .edition { grid-template-columns: repeat(2, 1fr); } .target{ flex-direction: column; } .wrap { align-items: center; justify-content: center; } .search-field { width: 80vw!important; } .enchant-row { grid-template-columns: 1fr; } } /* Small Mobile Devices (600px and below) */ @media (max-width: 600px) { .panel { padding: clamp(8px, 1.5vw, 12px); } button, .small-btn { padding: clamp(8px, 1.5vw, 10px) clamp(10px, 2vw, 12px); min-height: 44px; } input[type="text"], input[type="number"], select, textarea { padding: clamp(8px, 1.5vw, 10px); min-height: 44px; max-width: 100%; box-sizing: border-box; } .item-preview { width: clamp(40px, 8vw, 48px); height: clamp(40px, 8vw, 48px); } .grid { grid-template-columns: 1fr; } .row{ flex-direction: column; align-items: stretch; flex-wrap: wrap; } .row > *, .enchant-row > * { width: 100%; } .presets { display: flex; flex-wrap: wrap; gap: clamp(6px, 1vw, 8px); } .presets button { flex: 1 1 auto; max-width: 100%; } .theme-switcher select { width: 100%; max-width: 100%; } [style*="min-width:260px"], [style*="min-width:220px"], [style*="min-width: 260px"] { min-width: 100% !important; } .app.panel > div[style*="display:flex"], .app.panel > div { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: clamp(6px, 1vw, 8px) !important; } .wrap * { min-width: 0; } pre { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; } .right { position: static !important; top: auto !important; order: 2; width: 100%; margin-top: clamp(12px, 2vw, 16px); } .search-results { left: 0; right: 0; max-width: 100%; box-sizing: border-box; } } /* Ultra-Small Devices (360px and below) */ @media (max-width: 360px) { .cta-buttons { flex-direction: column; align-items: stretch; } .cta-button { width: 100%; } .examples-grid { grid-template-columns: 1fr; } } /* High-Density Displays */ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .panel { box-shadow: 0 6px 18px rgba(2, 6, 23, 0.4); /* Softer shadow for retina */ } .logo img { image-rendering: -webkit-optimize-contrast; /* Sharper images */ } } /* Prevent Horizontal Overflow */ html, body, .wrap { overflow-x: hidden; width: 100%; }