#crystalMinePanel,
#crystalGemSocketPanel{
  position:fixed !important;
  inset:auto !important;
  top:var(--stagePad,4px) !important;
  left:calc(50% - (var(--stageW,100vw) / 2) + var(--menuStageW,340px)) !important;
  width:var(--cityStageW,calc(100vw - 340px)) !important;
  height:var(--cityStageH,calc(100vh - 8px)) !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  transform:none !important;
  box-sizing:border-box;
  z-index:250100;
  display:none;
  align-items:center;
  justify-content:center;
  padding:0;
  overflow:hidden;
  background:rgba(0,0,0,.82);
  color:#f6dfb0;
  font-family:Georgia, 'Times New Roman', serif;
}

#crystalMinePanel.is-open,
#crystalGemSocketPanel.is-open{ display:flex !important; }

.crystalMineWindow{
  position:relative;
  width:100% !important;
  max-width:none !important;
  height:100% !important;
  min-height:0;
  box-sizing:border-box;
  overflow:hidden;
  border:1px solid rgba(182,128,43,.82);
  border-radius:7px;
  box-shadow:0 0 0 3px rgba(38,22,7,.92), 0 0 0 5px rgba(125,83,22,.62), 0 28px 80px rgba(0,0,0,.75), inset 0 0 80px rgba(0,0,0,.66);
  background:#050708 url('../img/ui/crystal_mine/crystal_mine_background_v1.png') center/cover no-repeat;
}

.crystalMineWindow::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(3,4,5,.96) 0%,rgba(3,4,5,.76) 25%,rgba(3,4,5,.08) 49%,rgba(3,4,5,.68) 76%,rgba(3,4,5,.95) 100%), linear-gradient(0deg,rgba(0,0,0,.86),transparent 25%,rgba(0,0,0,.50));
}

.crystalMineClose,
.crystalSocketClose{
  position:absolute;
  top:18px;
  right:19px;
  z-index:3;
  width:47px;
  height:42px;
  border:1px solid #9d6b1c;
  border-radius:5px;
  color:#fbe5ad;
  background:linear-gradient(#5e170e,#260706);
  font:700 30px/1 Georgia, serif;
  cursor:pointer;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.55),0 0 16px rgba(255,178,45,.24);
}

.crystalMineHeader{
  position:relative;
  z-index:2;
  text-align:center;
  padding:24px 80px 12px;
}

.crystalMineHeader h2{
  margin:0;
  color:#f3cf8d;
  font-size:clamp(24px,3.4vw,49px);
  font-weight:500;
  letter-spacing:3px;
  text-shadow:0 2px 3px #000,0 0 18px rgba(255,177,70,.25);
}

.crystalMineHeader p{
  margin:6px 0 0;
  color:#d8ad61;
  font-size:clamp(13px,1.45vw,20px);
}

.crystalMineLayout{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(250px,29%) minmax(240px,1fr) minmax(290px,31%);
  gap:18px;
  height:calc(100% - 112px);
  padding:0 22px 22px;
}

.crystalMineSide,
.crystalMineRules,
.crystalMineGemList{
  min-height:0;
  border:1px solid rgba(128,87,26,.8);
  background:rgba(6,7,7,.83);
  box-shadow:inset 0 0 32px rgba(0,0,0,.7),0 9px 28px rgba(0,0,0,.34);
}

.crystalMineSide{
  display:flex;
  flex-direction:column;
  padding:18px;
}

.crystalMineSectionTitle{
  padding:0 0 10px;
  border-bottom:1px solid rgba(146,98,28,.56);
  color:#f3cd85;
  text-align:center;
  font-size:clamp(18px,1.8vw,27px);
  letter-spacing:1px;
}

.crystalMineDropSlot{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:min(220px,80%);
  aspect-ratio:1;
  margin:16px auto 12px;
  border:2px dashed rgba(230,181,84,.8);
  background:rgba(0,0,0,.53);
  box-shadow:inset 0 0 28px rgba(0,0,0,.78),0 0 25px rgba(255,173,42,.14);
  transition:.16s ease;
}

.crystalMineDropSlot.is-over{
  border-color:#fff0a3;
  background:rgba(81,55,12,.42);
  box-shadow:inset 0 0 28px rgba(0,0,0,.78),0 0 34px rgba(255,199,75,.42);
}

.crystalMineDropHint{
  max-width:120px;
  color:rgba(242,213,155,.8);
  text-align:center;
  font-size:13px;
  line-height:1.35;
  text-transform:uppercase;
}

.crystalMineDropSlot img{
  width:84%;
  height:84%;
  object-fit:contain;
  filter:drop-shadow(0 0 10px rgba(158,87,255,.56));
}

.crystalMinePickaxeMeta{
  min-height:64px;
  text-align:center;
  line-height:1.4;
}

.crystalMinePickaxeMeta strong{ display:block; color:#f5d38f; font-size:18px; }
.crystalMinePickaxeMeta span{ color:#bf9b5e; font-size:14px; }

.crystalMineAction{
  width:100%;
  margin-top:12px;
  padding:13px 14px;
  border:1px solid #446d14;
  border-radius:3px;
  color:#e7f8c0;
  background:linear-gradient(#1f630d,#0c3209);
  box-shadow:inset 0 0 12px rgba(89,255,28,.14),0 0 12px rgba(57,160,14,.18);
  font:700 19px Georgia, serif;
  cursor:pointer;
}

.crystalMineAction:disabled{ opacity:.43; cursor:not-allowed; filter:grayscale(.7); }
.crystalMineAction.is-claim{ border-color:#987021; color:#ffe9a4; background:linear-gradient(#7d4e0c,#392207); }
.crystalMineAction.is-skip{ border-color:#7554b5; color:#eadcff; background:linear-gradient(#4d2679,#24123d); font-size:14px; padding:10px 8px; }

.crystalMineCost{
  margin:12px 0 0;
  color:#e1b45b;
  text-align:center;
  font-size:17px;
}

.crystalMineTimer{
  margin:12px 0 0;
  padding:10px;
  min-height:21px;
  border:1px solid rgba(138,95,27,.55);
  color:#ecd092;
  background:rgba(30,20,7,.55);
  text-align:center;
  font-size:15px;
}

.crystalMineInventoryPickaxes{
  margin-top:auto;
  padding-top:13px;
  border-top:1px solid rgba(146,98,28,.5);
}

.crystalMineInventoryLabel{ color:#c6a167; font-size:12px; text-align:center; }
.crystalMinePickaxeChoice{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:7px;
  padding:5px;
  border:1px solid rgba(133,92,30,.65);
  background:rgba(0,0,0,.38);
  cursor:grab;
}
.crystalMinePickaxeChoice img{ width:40px; height:40px; object-fit:contain; }
.crystalMinePickaxeChoice span{ flex:1; font-size:12px; line-height:1.3; }
.crystalMinePickaxeChoice button{ padding:5px 7px; border:1px solid #946d2b; color:#f7dc9e; background:#231607; cursor:pointer; }

.crystalMineCenter{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  min-width:0;
  padding:20px;
}

.crystalMineRules{
  width:min(430px,100%);
  padding:15px 20px;
  background:rgba(3,5,6,.69);
}
.crystalMineRules h3{ margin:0 0 10px; color:#eac27b; font-size:18px; text-align:center; }
.crystalMineRules p{ margin:7px 0; color:#c4a775; font-size:13px; line-height:1.45; }

.crystalMineGemList{ padding:16px; overflow:auto; }
.crystalMineGemList h3{ margin:0 0 12px; color:#eecb88; font-size:22px; font-weight:500; text-align:center; }
.crystalGemCard{
  display:grid;
  grid-template-columns:62px 1fr;
  gap:12px;
  align-items:center;
  margin:8px 0;
  padding:8px 11px;
  border:1px solid rgba(125,87,28,.76);
  background:linear-gradient(90deg,rgba(18,11,7,.9),rgba(5,7,7,.78));
}
.crystalGemCard img{ width:58px; height:58px; object-fit:contain; filter:drop-shadow(0 0 7px currentColor); }
.crystalGemCard strong{ display:block; font-size:15px; }
.crystalGemCard span{ display:block; margin-top:3px; color:#c7a873; font-size:12px; line-height:1.3; }
.crystalGemCard[data-gem-type="strength"] strong{ color:#ff735e; }
.crystalGemCard[data-gem-type="intelligence"] strong{ color:#63b7ff; }
.crystalGemCard[data-gem-type="agility"] strong{ color:#82e879; }
.crystalGemCard[data-gem-type="health"] strong{ color:#ff7f7a; }
.crystalGemCard[data-gem-type="bless"] strong{ color:#ffcf67; }

.crystalMineLocked{
  grid-column:1/-1;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:300px;
  color:#d1ad72;
  text-align:center;
  font-size:19px;
}

.crystalSocketWindow{
  position:relative;
  width:min(980px,96vw);
  max-height:min(820px,92vh);
  overflow:auto;
  padding:25px;
  border:1px solid #9c6b25;
  border-radius:7px;
  background:linear-gradient(135deg,#0e0b08,#07090a 55%,#100b06);
  box-shadow:0 25px 70px rgba(0,0,0,.8),inset 0 0 50px rgba(0,0,0,.68);
}
.crystalSocketWindow h2{ margin:0 50px 7px 0; color:#f1cd87; font-size:28px; font-weight:500; }
.crystalSocketIntro{ margin:0 0 18px; color:#c9ab78; font-size:14px; }
.crystalSocketGearList{ display:grid; gap:9px; }
.crystalSocketGear{
  display:grid;
  grid-template-columns:58px minmax(120px,1fr) minmax(220px,1.3fr);
  gap:12px;
  align-items:center;
  padding:9px;
  border:1px solid rgba(139,94,29,.7);
  background:rgba(0,0,0,.35);
}
.crystalSocketGear > img{ width:54px; height:54px; object-fit:contain; }
.crystalSocketGearName strong{ display:block; color:#f0d090; font-size:15px; }
.crystalSocketGearName small{ color:#ad8d5b; }
.crystalSocketActions{ display:flex; flex-wrap:wrap; gap:6px; }
.crystalSocketButton{ display:inline-flex; align-items:center; gap:5px; padding:5px 7px; border:1px solid #79571f; color:#f1d59a; background:#201508; cursor:pointer; }
.crystalSocketButton[draggable="true"]{ cursor:grab; }
.crystalSocketButton[draggable="true"]:active{ cursor:grabbing; }
.crystalSocketButton:disabled{ opacity:.45; cursor:not-allowed; }
.crystalSocketButton img{ width:27px; height:27px; object-fit:contain; }
.crystalSocketSlots{ margin-top:5px; color:#bfa06b; font-size:12px; }
.crystalGemDropOver{ border-color:#f4d27c !important; box-shadow:inset 0 0 18px rgba(0,0,0,.55),0 0 20px rgba(111,226,255,.48) !important; }
.crystalGemDragSource{ opacity:.45 !important; }
.crystalGemDragGhost{ position:fixed; z-index:10030; width:58px; height:58px; pointer-events:none; display:grid; place-items:center; border:1px solid rgba(245,207,123,.8); border-radius:6px; background:rgba(5,8,9,.9); box-shadow:0 0 18px rgba(93,183,255,.55); }
.crystalGemDragGhost img{ width:48px; height:48px; object-fit:contain; }

@media(max-width:1050px){
  .crystalMineWindow{ height:100% !important; min-height:0; overflow:auto; }
  .crystalMineLayout{ grid-template-columns:1fr 1fr; height:auto; }
  .crystalMineCenter{ display:none; }
  .crystalMineGemList{ max-height:620px; }
}

@media(max-width:680px){
  #crystalMinePanel,#crystalGemSocketPanel{ padding:7px; }
  .crystalMineWindow{ width:100% !important; height:100% !important; }
  .crystalMineHeader{ padding:19px 55px 10px 10px; }
  .crystalMineHeader h2{ font-size:25px; letter-spacing:1px; }
  .crystalMineLayout{ display:flex; flex-direction:column; padding:0 10px 14px; }
  .crystalMineSide{ min-height:480px; }
  .crystalMineGemList{ max-height:none; }
  .crystalSocketWindow{ padding:17px; }
  .crystalSocketGear{ grid-template-columns:47px 1fr; }
  .crystalSocketGear > img{ width:45px; height:45px; }
  .crystalSocketActions{ grid-column:1/-1; }
}