*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

	:root{
		--card-w:min(72px,13vw);
		--card-h:calc(var(--card-w)*1.45);
		--felt:#0b6623;
		--gold:#d4a844;
		--chip-sz:min(60px,9vw);
		--rim-h:clamp(38px,6vh,52px);
		--player-card-w:calc(var(--card-w)*1.3);
		--player-card-h:calc(var(--player-card-w)*1.45);
	}
	html,body{
		height:100vh;height:100dvh;
		width:100vw;
		overflow:hidden;
		font-family:'Segoe UI',system-ui,sans-serif;
		color:#fff;
		user-select:none;
		-webkit-user-select:none;
		touch-action:manipulation;
		-webkit-touch-callout:none;
		background:#111;
	}


	/* ===== GAME FRAME ===== */
	#game-frame{
		position:relative;
		width:100%;height:100vh;height:100dvh;
		max-width:600px;
		margin:0 auto;
		overflow:hidden;
		background:radial-gradient(ellipse at 50% 42%,#0f8a30 0%,#0b6623 40%,#07521a 75%,#053f14 100%);
	}


	/* ===== WOOD RIM ===== */
	#wood-rim{
		position:absolute;
		bottom:0;left:0;right:0;
		height:var(--rim-h);
		background:linear-gradient(to bottom,#6b4226 0%,#5c3a1e 40%,#4a2e15 100%);
		border-top:3px solid #3a2210;
		box-shadow:inset 0 3px 10px rgba(0,0,0,.35);
		z-index:0;
	}


	/* ===== SEATS ===== */
	.seat{position:absolute;display:flex;justify-content:center;z-index:2}

	.seat-dealer{top:1%;left:50%;transform:translateX(-50%)}
	.seat-left{top:24%;left:1%;transform:translateY(-50%)}
	.seat-right{top:24%;right:1%;transform:translateY(-50%)}
	.seat-player{
		bottom:calc(var(--rim-h) + 90px);
		left:50%;transform:translateX(-50%);
		z-index:4;
	}


	/* ===== PLAYER AREA ===== */
	.player-area{
		position:relative;text-align:center;
		padding:3px 6px;border-radius:8px;
		transition:box-shadow .3s;
		background:rgba(0,0,0,.05);
	}
	.player-area.active-turn{
		box-shadow:0 0 0 2px var(--gold),0 0 14px rgba(212,168,68,.45);
	}
	.player-area.bust .label .status{color:#ff5555}
	.player-area.blackjack .label .status{color:#ffd700}
	.player-area.win .label .status{color:#55ff55}
	.player-area.lose .label .status{color:#ff5555}
	.player-area.push .label .status{color:#aaaaff}

	.label{
		display:flex;align-items:center;gap:4px;
		justify-content:center;font-size:min(.7rem,2.2vw);
		margin-bottom:2px;white-space:nowrap;
	}
	.label .name{font-weight:700;color:var(--gold)}
	.label .score{
		background:rgba(0,0,0,.5);
		padding:2px 8px;
		border-radius:10px;
		font-size: min(1rem, 3.5vw);
		font-weight:700;letter-spacing:.5px;
		border:1px solid rgba(255,255,255,.15);
	}
	.label .status{font-weight:700;font-size:min(1rem,3vw)}

	.hand{
		display:flex;gap:4px;justify-content:center;
		min-height:calc(var(--card-h) + 2px);
		align-items:flex-start;position:relative;
	}
	.hand.drop-target{box-shadow:0 0 18px rgba(212,168,68,.5);border-radius:8px}

	/* player hand uses bigger cards */
	.seat-player .hand{min-height:calc(var(--player-card-h) + 2px)}

	/* side seat hands stack tighter */
	.seat-left .hand,.seat-right .hand{gap:0;flex-wrap:nowrap}
	.seat-left .hand .card-slot,.seat-right .hand .card-slot{
		width:calc(var(--card-w)*.62);height:calc(var(--card-h)*.62);
		margin-right:-8px;
	}
	.seat-left .hand .card-slot:last-child,.seat-right .hand .card-slot:last-child{margin-right:0}


	/* ===== CARDS ===== */
	.card-slot{
		width:var(--card-w);height:var(--card-h);
		perspective:800px;flex-shrink:0;position:relative;
		opacity:0;animation:none;
	}
	/* bigger player cards */
	.seat-player .card-slot{
		width:var(--player-card-w);height:var(--player-card-h);
	}
	.card-slot.dealt{animation:dealIn .4s ease forwards}
	@keyframes dealIn{
		0%{opacity:0;transform:var(--deal-from,translateY(-30px) scale(.6))}
		70%{opacity:1;transform:scale(1.03)}
		100%{opacity:1;transform:scale(1)}
	}

	.card{
		width:100%;height:100%;position:relative;
		transform-style:preserve-3d;transition:transform .45s ease;
		border-radius:6px;
	}
	.card.flipped{transform:rotateY(180deg)}

	.card-face{
		position:absolute;width:100%;height:100%;
		backface-visibility:hidden;border-radius:6px;
		overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.4);
	}
	.card-face img{width:100%;height:100%;object-fit:cover;display:block}
	.card-front{transform:rotateY(180deg)}

	/* flippable hint */
	.card-slot[data-flippable="true"]{cursor:grab;touch-action:none}
	.card-slot[data-flippable="true"]::after{
		content:'';position:absolute;top:0;right:-2px;bottom:0;width:14px;
		background:linear-gradient(to left,rgba(212,168,68,.45),transparent);
		border-radius:0 6px 6px 0;pointer-events:none;
		animation:flipHint 1.4s ease-in-out infinite;
	}
	@keyframes flipHint{
		0%,100%{opacity:.35;transform:translateX(0)}
		50%{opacity:.9;transform:translateX(2px)}
	}


	/* ===== TABLE CENTER ===== */
	#table-center{
		position:absolute;top:43%;left:50%;
		transform:translate(-50%,-50%);
		display:flex;flex-direction:column;align-items:center;gap:6px;
		z-index:1;
	}
	#deck-pile{
		position:relative;
		width:var(--card-w);height:var(--card-h);
		cursor:grab;touch-action:none;transition:transform .15s;
	}
	#deck-pile.active-drag{transform:scale(.92)}
	.deck-card{
		position:absolute;width:100%;height:100%;
		border-radius:6px;box-shadow:0 2px 6px rgba(0,0,0,.4);object-fit:cover;
	}
	.deck-card.shuffling{animation:deckShuffle .32s ease-in-out infinite alternate}
	.deck-card.shuffling:nth-child(1){animation-delay:0s}
	.deck-card.shuffling:nth-child(2){animation-delay:.05s;animation-name:deckShuffleAlt}
	.deck-card.shuffling:nth-child(3){animation-delay:.10s}
	.deck-card.shuffling:nth-child(4){animation-delay:.15s;animation-name:deckShuffleAlt}
	.deck-card.shuffling:nth-child(5){animation-delay:.20s}
	@keyframes deckShuffle{
		0%{transform:translateX(-20px) rotate(-8deg)}
		100%{transform:translateX(20px) rotate(8deg)}
	}
	@keyframes deckShuffleAlt{
		0%{transform:translate(-14px,-6px) rotate(-5deg) scale(1.03)}
		100%{transform:translate(14px,6px) rotate(5deg) scale(.97)}
	}

	#pot-area{
		width:min(60px,10vw);height:min(60px,10vw);
		border-radius:50%;border:2px dashed transparent;
		display:flex;align-items:center;justify-content:center;
		position:relative;transition:all .2s;
	}
	#pot-area.has-chips{border-color:transparent}
	#pot-area.drag-over{
		border-color:var(--gold);background:rgba(212,168,68,.15);
		box-shadow:0 0 20px rgba(212,168,68,.35);transform:scale(1.12);
	}
	.pot-chip{
		position:absolute;width:22px;height:22px;border-radius:50%;
		border:2px dashed rgba(255,255,255,.4);
		display:flex;align-items:center;justify-content:center;
		font-size:.4rem;font-weight:700;color:#fff;
		text-shadow:0 1px 2px rgba(0,0,0,.6);pointer-events:none;
	}
	#pot-label{
		position:absolute;bottom:-14px;font-size:min(.65rem,2vw);
		color:var(--gold);font-weight:700;white-space:nowrap;
	}


	/* ===== MESSAGE ===== */
	#message{
		position:absolute;top:20%;left:50%;transform:translateX(-50%);
		text-align:center;font-size:min(1rem,3.5vw);
		color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.6);
		z-index:10;pointer-events:none;max-width:85%;
		white-space:nowrap;
		background:rgba(0,0,0,.5);padding:8px 18px;border-radius:10px;
		backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
	}
	#message:empty{background:none;padding:0}


	/* ===== BUTTONS ===== */
	#btn-group{
		position:absolute;
		bottom:calc(var(--rim-h) + var(--player-card-h) + 150px);
		left:50%;transform:translateX(-50%);
		display:flex;flex-direction:row;gap:8px;
		z-index:20;
	}
	.btn{
		padding:9px 16px;
		border:2px solid rgba(255,255,255,.6);
		background:rgba(0,0,0,.55);
		color:#fff;font-size:min(.8rem,2.8vw);font-weight:700;
		border-radius:8px;cursor:pointer;letter-spacing:1px;
		transition:all .18s ease;min-width:min(90px,22vw);
		text-align:center;touch-action:manipulation;
		display:none;
		backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
	}
	.btn:hover:not(:disabled){
		transform:translateY(-2px);
		box-shadow:0 4px 12px rgba(255,215,0,.3);
		border-color:#ffd700;
	}
	.btn:active:not(:disabled){background:rgba(255,255,255,.2);transform:translateY(0)}
	.btn:disabled{opacity:.25;pointer-events:none}
	.btn.glow{
		animation:btnGlow 1.1s ease-in-out infinite;
		border-color:#ffd700;
		background:rgba(40,30,0,.65);
	}
	@keyframes btnGlow{
		0%,100%{box-shadow:0 0 8px rgba(255,215,0,.4)}
		50%{box-shadow:0 0 22px rgba(255,215,0,.8)}
	}


	/* ===== CHIPS (horizontal bar) ===== */
	#chips-bar{
		position:absolute;
		bottom:calc(var(--rim-h) + 10px);
		left:50%;transform:translateX(-50%);
		display:flex;flex-direction:row;gap:6px;
		z-index:20;
	}
	.chip-stack{position:relative;display:inline-flex}
	.chip-stack.hidden{display:none}
	.chip{
		width:var(--chip-sz);height:var(--chip-sz);
		border-radius:50%;
		display:inline-flex;align-items:center;justify-content:center;
		font-weight:700;font-size:min(1rem,2vw);
		cursor:grab;touch-action:none;
		border:3px dashed rgba(255,255,255,.5);
		color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6);
		transition:transform .1s;
		box-shadow:0 1px 4px rgba(0,0,0,.4);
	}
	.chip:active{transform:scale(1.15)}
	.c5{background:#cc3333}
	.c10{background:#3366cc}
	.c25{background:#22aa44}
	.c50{background:#333}
	.c100{background:#8844cc}


	/* ===== BET INFO ===== */
	#bet-info{
		position:absolute;bottom:calc(var(--rim-h)/2);left:50%;
		transform:translate(-50%,50%);
		font-size:min(.8rem,2.8vw);color:rgba(255,255,255,.9);
		display:flex;gap:14px;z-index:21;white-space:nowrap;
		font-weight:600;
		text-shadow:0 1px 3px rgba(0,0,0,.6);
	}
	#bet-info strong{color:var(--gold);font-size:min(1.3rem,3.4vw)}
	#multiplier{
		display:inline-block;padding:1px 7px;border-radius:6px;
		background:rgba(255,215,0,.2);color:#ffd700;font-weight:700;
		font-size:min(.7rem,2.4vw);margin-left:4px;vertical-align:middle;
	}
	#multiplier:empty{display:none}


	/* ===== BALANCE POPUP ===== */
	.balance-popup{
		position:absolute;pointer-events:none;z-index:30;
		font-weight:900;font-size:min(1.1rem,4vw);
		text-shadow:0 2px 6px rgba(0,0,0,.7);
		animation:balPop .9s ease-out forwards;
		white-space:nowrap;
	}
	.balance-popup.win{color:#55ff55}
	.balance-popup.lose{color:#ff5555}
	@keyframes balPop{
		0%{opacity:1;transform:translateY(0) scale(1)}
		60%{opacity:1;transform:translateY(-28px) scale(1.15)}
		100%{opacity:0;transform:translateY(-48px) scale(.9)}
	}


	/* ===== DRAG GHOST ===== */
	.drag-ghost{position:fixed;pointer-events:none;z-index:1000}


	/* ===== RESPONSIVE ===== */
	@media(max-height:580px){
		:root{--card-w:min(54px,11vw);--chip-sz:min(32px,7vw);--rim-h:clamp(30px,5vh,38px)}
		.btn{padding:6px 10px;font-size:min(.65rem,2.4vw);min-width:min(70px,18vw)}
		.seat-left,.seat-right{top:22%}
		#chips-bar{gap:3px}
	}
	@media(min-aspect-ratio:5/4){
		#game-frame{max-width:480px}

	}