/*
  Local rebuild of the missing caseopen/main.css + caseopen/caselive.css.
  Colors/fonts are picked to match ../css/4-col-portfolio.css (body #131318,
  accent #2EFE9A, gold #DAA520/#feca57, panel #1f202b/#2d2e3a).
  The original per-skin screenshots under caseopen/ were never archived by
  the Wayback Machine, so items render as color-coded text placeholders
  instead of images.
*/

.lucky {
	display: block;
	width: 100%;
	padding: 0 20px;
	box-sizing: border-box;
}

.cubukbildiri-text .case-icon {
	font-size: 1.2em;
	padding-right: 10px;
}

.bor {
	width: 100%;
	margin: 0 auto 16px auto;
	background: rgba(255, 255, 255, 0.03);
	padding: 16px 0;
	border: 2px solid #DAA520;
	border-radius: 10px;
	overflow: hidden;
	position: relative;
	height: 194px;
	box-sizing: border-box;
}

.bor:before {
	content: "";
	display: block;
	height: 16px;
	width: 2px;
	background: #DAA520;
	position: absolute;
	bottom: 0;
	left: 49.7%;
	z-index: 2;
}

.bor ul {
	margin-left: -426px;
	width: 7200px;
	list-style: none;
	padding: 0;
}

.bor ul li {
	float: left;
	border-right: 1px solid #2d2e3a;
	padding: 6px 16px 0 16px;
	width: 170px;
	text-align: center;
	box-sizing: border-box;
}

.bor ul li a {
	display: block;
	text-decoration: none;
}

.skin-placeholder {
	width: 136px;
	height: 76px;
	margin: 0 auto;
	border-radius: 6px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 11px;
	font-weight: bold;
	line-height: 1.25;
	color: #fff;
	padding: 4px 6px;
	box-sizing: border-box;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.skin-placeholder .icon {
	display: block;
	font-size: 18px;
	margin-bottom: 3px;
}

/* Real skin/case/key renders, sourced from Valve's public item-image CDN
   (the site's own caseopen/*.png crops were never archived). */
.skin-tile {
	width: 136px;
	height: 76px;
	margin: 0 auto;
	border-radius: 6px;
	background: linear-gradient(160deg, #2d2e3a, #1a1b22);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6px;
	box-sizing: border-box;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.skin-tile img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5));
}

.cat-rifle  { background: linear-gradient(135deg, #1f6feb, #2EFE9A); }
.cat-pistol { background: linear-gradient(135deg, #6c5ce7, #a55eea); }
.cat-smg    { background: linear-gradient(135deg, #0abde3, #48dbfb); color: #12232b; text-shadow: none; }
.cat-heavy  { background: linear-gradient(135deg, #e17055, #fab1a0); color: #3b1a10; text-shadow: none; }
.cat-knife  { background: linear-gradient(135deg, #DAA520, #fceabb); color: #2c2a2a; text-shadow: none; }
.cat-case   { background: linear-gradient(135deg, #576574, #8395a7); }
.cat-key    { background: linear-gradient(135deg, #feca57, #ff9f43); color: #2c2a2a; text-shadow: none; }
.cat-unlucky{ background: linear-gradient(135deg, #2d2e3a, #1a1b22); color: #808e9b; }

.promo-item img {
	max-width: 100px;
	max-height: 60px;
	border-radius: 6px;
}

.spinner {
	width: 100%;
	text-align: center;
	margin: 18px 0 30px;
}

.spinner a {
	display: inline-block;
	padding: 12px 36px;
	background: linear-gradient(to bottom, #2EFE9A 0%, #21ad6a 100%);
	color: #131318;
	text-shadow: none;
	border-radius: 10px;
	text-transform: uppercase;
	font-weight: bold;
	text-decoration: none;
	letter-spacing: .5px;
}

.spinner a:hover {
	box-shadow: 0 0 12px -2px rgba(46, 254, 154, .8);
}

.code-spin {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-top: 6px;
	padding-bottom: 4px;
	font-size: 11px;
	line-height: 1.3;
	max-height: 29px;
	color: #808e9b;
	max-width: 138px;
}

.spin {
	animation: los;
	animation-duration: 6s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

@keyframes los {
	0%   { margin-left: -400px; }
	25%  { margin-left: 0px; }
	100% { margin-left: -5900px; }
}

.nice .skin-placeholder,
.nice .skin-tile,
.nice .promo-item img {
	animation: boom 1s infinite;
	animation-delay: 6.5s;
}

@keyframes boom {
	0%   { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
	50%  { box-shadow: 0 0 16px 4px rgba(218, 165, 32, .8); }
	100% { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
}

@media screen and (max-width: 760px) {
	.bor { height: auto; padding: 10px 0; }
	.lucky { padding: 0 10px; }
}