@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');

/* Modern deep-navy glassmorphism Blacksmith UI
   - Keeps original class names so JS behavior remains unchanged
   - Uses responsive sizing suitable for large displays / TVs
   - Deep-navy radial background, glass cards, cyan/amber accents, blur effects
*/
:root{
  --bg-deep-1: #050617; /* almost black with blue tint */
  --bg-deep-2: #07102a; /* deep navy */
  --glass: rgba(255,255,255,0.04);
  --glass-strong: rgba(255,255,255,0.06);
  --accent-amber: #ffb35a;
  --accent-amber-strong: #ff8c00;
  --accent-cyan: #32f0ff;
  --accent-cyan-strong: #1fd1e5;
  --muted: rgba(255,255,255,0.75);
  --glass-border: rgba(255,255,255,0.06);
  --card-radius: 18px;
  --card-padding: clamp(18px, 2.2vw, 40px);
  --soft-shadow: 0 10px 40px rgba(4,6,18,0.6);
  --inner-border: rgba(255,255,255,0.02);
  --tv-scale: clamp(14px, 2.2vw, 28px); /* base font for large displays */
}

*{box-sizing:border-box;font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;}
html,body{height:100%;margin:0;background:var(--bg-deep-1);color:var(--muted);}

/* Container */
.blacksmith-view{
  display:flex;
  flex-direction:column;
  width:100%;
  height:100%;
  padding:calc(var(--card-padding) * 0.6);
  gap: clamp(12px, 1.2vw, 28px);
  position:relative;
  overflow:hidden;
  align-items:stretch;
  /* radial layered background for depth */
  background:
    radial-gradient(1200px 600px at 10% 20%, rgba(10,30,60,0.35), transparent 12%),
    radial-gradient(900px 500px at 85% 80%, rgba(30,10,40,0.25), transparent 10%),
    linear-gradient(180deg, var(--bg-deep-2) 0%, var(--bg-deep-1) 100%);
}

/* subtle ambient forge glow */
.blacksmith-view::before{
  content:'';
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(800px 300px at 65% 20%, rgba(255,140,0,0.04), transparent 10%),
    radial-gradient(600px 300px at 20% 70%, rgba(50,240,255,0.02), transparent 8%);
  mix-blend-mode: screen;
  animation: forge-glow 6s ease-in-out infinite;
}
@keyframes forge-glow{0%,100%{opacity:0.6}50%{opacity:1}}

/* Header */
.blacksmith-header{z-index:1;text-align:center;padding:calc(var(--card-padding) * 0.3);border-radius:14px;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center}
.blacksmith-header h1{
  margin:0;color:var(--accent-amber);
  font-weight:800;letter-spacing:2px;font-size:clamp(36px,4.8vw,92px);
  text-shadow:0 6px 28px rgba(0,0,0,0.6),0 0 18px rgba(255,140,60,0.12);
}

.blacksmith-player-info{display:flex;gap:clamp(18px,2.2vw,48px);align-items:center;font-size:clamp(18px,2.2vw,36px)}
.blacksmith-player-info .player-name{color:var(--muted);font-weight:700}
.blacksmith-player-info .player-coins{background:linear-gradient(90deg, rgba(255,179,90,0.06), rgba(50,240,255,0.02));padding:8px 14px;border-radius:12px;color:var(--accent-amber-strong);font-weight:700;box-shadow:inset 0 -1px 0 rgba(0,0,0,0.3)}

/* Content area - use glass cards */
.blacksmith-content{display:flex;flex-direction:column;gap:clamp(12px,1.6vw,28px);flex:1;position:relative;z-index:1;padding:calc(var(--card-padding) * 0.2)}

/* Welcome */
.blacksmith-welcome{align-items:center;justify-content:center;border-radius:var(--card-radius);padding:var(--card-padding);background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid var(--glass-border);backdrop-filter: blur(8px);-webkit-backdrop-filter: blur(8px);box-shadow:var(--soft-shadow);}
.welcome-title{font-size:clamp(36px,4.2vw,72px);color:var(--accent-amber-strong);font-weight:800}
.welcome-message{font-size:clamp(20px,2.6vw,40px);color:#e9eef6;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.12));padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);}

/* Current Equipment - glass card */
.current-equipment{background:var(--glass);border-radius:var(--card-radius);padding:calc(var(--card-padding)*0.6);border:1px solid var(--glass-border);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:var(--soft-shadow);display:flex;flex-direction:column;gap:12px; /* make the equipment card stretch full width */ flex:1 1 100%; width:100%;}

/* layout equipment items side-by-side on wide screens; keep stacked on small screens */
.equipment-items{display:flex;gap:clamp(12px,1.6vw,24px);justify-content:space-between;align-items:center;flex-direction:row}
.equipment-item{display:flex;align-items:center;gap:16px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.12));padding:18px;border-radius:14px;border:1px solid var(--inner-border); /* allow flexible sizing per item */ min-width:0;flex:1 1 48%;transition:transform .28s ease,box-shadow .28s ease}

/* Top section layout */
.top-section{display:flex;gap:clamp(16px,2.2vw,40px);align-items:stretch}
.upgrade-info{flex:1;display:flex;gap:16px;align-items:flex-start;padding:18px;border-radius:14px;background:linear-gradient(180deg, rgba(255,255,255,0.018), rgba(0,0,0,0.14));border:1px solid var(--glass-border);backdrop-filter:blur(6px)}
.upgrade-info .info-icon{font-size:clamp(36px,4.2vw,64px);color:var(--accent-cyan)}
.upgrade-info .info-title{font-size:clamp(20px,2.6vw,44px);font-weight:800;color:#fff}
.upgrade-info .info-item{font-size:clamp(16px,2.2vw,34px);color:rgba(230,240,255,0.9)}

/* Shop sections - two columns & responsive */
.shop-sections{display:flex;gap:clamp(16px,2.2vw,40px);flex:1;min-height:0}
.shop-section{flex:1;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.14));border-radius:var(--card-radius);padding:calc(var(--card-padding)*0.5);border:1px solid var(--glass-border);backdrop-filter:blur(6px);display:flex;flex-direction:column;min-height:0}
.shop-section.active{outline:2px solid rgba(255,140,60,0.12);box-shadow:0 18px 60px rgba(255,140,60,0.06), 0 6px 20px rgba(0,0,0,0.6)}
.shop-section h3{font-size:clamp(26px,3.2vw,56px);margin:0;text-align:center;color:var(--accent-cyan);font-weight:800}
.shop-items{display:flex;flex-direction:column;gap:12px;overflow-y:auto;padding-right:6px;flex:1;min-height:0}
.shop-items::-webkit-scrollbar{width:14px}
.shop-items::-webkit-scrollbar-track{background:transparent}
.shop-items::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--accent-cyan),var(--accent-cyan-strong));border-radius:12px}

/* Individual shop item card - glass with inner border and accent hover */
.shop-item{display:flex;align-items:center;gap:16px;padding:18px;border-radius:14px;background:linear-gradient(180deg, rgba(255,255,255,0.015), rgba(0,0,0,0.08));border:1px solid var(--inner-border);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;cursor:pointer}
.shop-item:hover{transform:translateY(-6px);box-shadow:0 18px 60px rgba(50,240,255,0.06), 0 6px 24px rgba(0,0,0,0.6);border-color:rgba(50,240,255,0.14)}
.shop-item.cannot-afford{opacity:0.45;cursor:not-allowed;filter:grayscale(0.1)}
.shop-item.highlighted{border-color:var(--accent-amber);box-shadow:0 18px 60px rgba(255,140,60,0.08);transform:translateY(-10px)}
.shop-item .item-icon{font-size:clamp(48px,6.6vw,120px);flex-shrink:0}
.shop-item .item-name{font-size:clamp(22px,3.2vw,48px);font-weight:800;color:#ffffff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shop-item .item-stats{display:flex;gap:10px;flex-wrap:wrap}

/* Stat badges - pill style */
.stat-badge{display:inline-block;padding:8px 18px;border-radius:999px;font-size:clamp(14px,2.2vw,28px);font-weight:800;color:#051426;}
.stat-badge.level{background:linear-gradient(90deg,#2d2b4a,#3b2d6b);color:#e6edff}
.stat-badge.attack{background:linear-gradient(90deg,#ff7b7b,#ff4d4d);color:#fff}
.stat-badge.defense{background:linear-gradient(90deg,#6fb7ff,#2ea0ff);color:#042440}
.stat-badge.price{background:linear-gradient(90deg,#baf3c7,#66e27a);color:#03220f}
.stat-badge.price.too-expensive{background:linear-gradient(90deg,#ff8f8f,#ff5a5a);color:#fff}

/* Message area */
.blacksmith-message{font-size:clamp(18px,2.2vw,36px);padding:14px;border-radius:12px;text-align:center;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.08));border:1px solid rgba(255,255,255,0.02);color:var(--muted);font-weight:600}
.blacksmith-message.browsing{background:linear-gradient(90deg,rgba(50,240,255,0.04),rgba(255,140,60,0.03));color:var(--accent-amber-strong);border:1px solid rgba(50,240,255,0.06)}
.blacksmith-message.inspecting{background:linear-gradient(90deg, rgba(50,240,255,0.04), rgba(50,240,255,0.02));color:var(--accent-cyan);border:1px solid rgba(50,240,255,0.06);box-shadow:0 8px 30px rgba(50,240,255,0.03)}
.blacksmith-message.error{background:linear-gradient(90deg, rgba(255,80,80,0.04), rgba(255,20,20,0.02));color:#ff7b7b}
.blacksmith-message.success{background:linear-gradient(90deg, rgba(76,175,80,0.04), rgba(100,225,120,0.02));color:#9ff3b8}

/* Item inspection overlay - centered larger glass card */
.item-inspection{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:none;z-index:120}
.inspection-card{display:flex;gap:24px;align-items:center;padding:calc(var(--card-padding)*0.6);border-radius:20px;background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.18));border:1px solid rgba(255,255,255,0.04);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 24px 80px rgba(2,6,20,0.8)}
.inspection-icon{font-size:clamp(64px,8.2vw,160px);filter:drop-shadow(0 10px 50px rgba(0,0,0,0.7));}
.inspection-name{font-size:clamp(26px,3.6vw,48px);font-weight:800;color:#ffffff}
.inspection-stats .stat-badge{font-size:clamp(14px,2.2vw,22px)}

/* Animations preserved but toned for modern look */
.anvil{animation:anvil-bounce 1.6s ease-in-out infinite}
@keyframes anvil-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.sparks{animation:sparks-flicker .6s ease-in-out infinite}
@keyframes sparks-flicker{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.6;transform:scale(1.08)}}

/* Purchase/insufficient funds animations (kept) */
.blacksmith-view.purchase-success{animation:purchase-success-flash .5s ease 3}
@keyframes purchase-success-flash{0%,100%{box-shadow:var(--soft-shadow)}50%{box-shadow:0 10px 60px rgba(76,175,80,0.14)}}
.blacksmith-view.insufficient-funds{animation:insufficient-funds-shake .5s ease}
@keyframes insufficient-funds-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}50%{transform:translateX(8px)}75%{transform:translateX(-8px)}}

/* Responsive adjustments for narrow screens */
@media (max-width: 900px){
  .top-section{flex-direction:column}
  .shop-sections{flex-direction:column}
  .equipment-item{min-width:unset;flex:1 1 100%}
  .equipment-items{flex-direction:column}
}

/* Ensure focus/high-visibility for TV remote or keyboard navigation */
.shop-item:focus{outline:2px solid rgba(50,240,255,0.14);transform:translateY(-6px)}
.shop-item:focus-visible{outline-offset:4px}

/* end of new styles */