diff --git a/styles.css b/styles.css
index 92da8f2..694d6b1 100644
--- a/styles.css
+++ b/styles.css
@@ -36,6 +36,8 @@ button, input, select, textarea {
   color: var(--text);
   background: rgba(255, 255, 255, 0.06);
   padding: 0.58rem 0.7rem;
+  min-width: 0;
+  max-width: 100%;
 }
 
 button {
@@ -60,6 +62,7 @@ label {
   gap: 0.35rem;
   color: var(--muted);
   font-size: 0.9rem;
+  min-width: 0;
 }
 
 main, .hero {
@@ -193,14 +196,15 @@ h3 { margin-bottom: 0; }
 
 .section-heading { margin: 1.5rem 0 1rem; }
 .section-heading p { color: var(--muted); }
-.gear-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); padding-bottom: 3rem; }
-.gear-card { display: grid; gap: 0.6rem; padding: 0.8rem; }
-.gear-title-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
-.gear-title-row h3 { font-size: 1rem; }
-.piece-score { color: var(--accent); font-weight: 800; }
+.gear-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); padding-bottom: 3rem; }
+.gear-card { display: grid; gap: 0.55rem; padding: 0.7rem; min-width: 0; overflow: hidden; }
+.gear-title-row { display: grid; grid-template-columns: 1fr; gap: 0.15rem; align-items: start; }
+.gear-title-row h3 { font-size: 1rem; overflow-wrap: anywhere; }
+.piece-score { color: var(--accent); font-weight: 800; font-size: 0.85rem; }
 .inline-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
 .effects { display: grid; gap: 0.5rem; }
-.effect-row { display: grid; grid-template-columns: minmax(0, 1fr) 88px; gap: 0.5rem; align-items: end; }
+.effect-row { display: grid; grid-template-columns: 1fr; gap: 0.45rem; align-items: end; }
+.gear-card .effect-row input[data-effect-value] { width: 100%; }
 .cap-hint { color: var(--muted); font-size: 0.8rem; margin-top: 0.2rem; }
 
 @media (max-width: 900px) {