@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand:wght@400;700&family=Indie+Flower&display=swap');

:root{
	--line-color: #2c3e50;
	--green-accent: #27ae60;
	--pink-accent: #e91e63;
	--purple-accent: #9c27b0;
	--blue-accent: #3498db;
	--paper-bg: #f5f5f0;
	--shadow: 0 4px 12px rgba(0,0,0,0.15);
#grid{ 
	display:grid; 
	background: #c9f7c9; 
	border: 3px solid var(--line-color); 
	box-shadow: 0 6px 12px rgba(0,0,0,0.2);
	position:relative;
	border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
	overflow: visible;
}
	background-size: 50px 50px;
	margin:0; 
	display:flex; 
	flex-direction:column; 
	align-items:center; 
	min-height:100vh; 
	color:var(--line-color);
	padding: 20px 10px;
}

.start-overlay {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	background-color: var(--paper-bg);
	background-image: 
		linear-gradient(0deg, transparent 24%, rgba(100, 150, 255, 0.08) 25%, rgba(100, 150, 255, 0.08) 26%, transparent 27%, transparent 74%, rgba(100, 150, 255, 0.08) 75%, rgba(100, 150, 255, 0.08) 76%, transparent 77%, transparent),
		linear-gradient(90deg, transparent 24%, rgba(100, 150, 255, 0.08) 25%, rgba(100, 150, 255, 0.08) 26%, transparent 27%, transparent 74%, rgba(100, 150, 255, 0.08) 75%, rgba(100, 150, 255, 0.08) 76%, transparent 77%, transparent);
	background-size: 50px 50px;
}

.start-card {
	width: 520px;
	max-width: 92vw;
	background: #fff;
	border-radius: 16px;
	box-shadow: var(--shadow);
	border: 2px solid rgba(0,0,0,0.08);
	padding: 28px 32px;
	text-align: center;
}

.logo {
	margin: 0 0 8px 0;
	font-size: 36px;
	font-weight: 900;
	letter-spacing: 2px;
	color: #d4b417;
	text-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.subtitle {
	margin: 0 0 18px 0;
	font-size: 16px;
	color: #666;
}

.start-actions {
	display: grid;
	gap: 14px;
}

.size-group {
	background: transparent;
	

	padding: 14px 16px;
	box-shadow: none;
	transform: rotate(-0.5deg);
}

.size-label {
	margin: 0 0 10px 0;
	font-weight: 800;
	color: var(--line-color);
	font-family: 'Patrick Hand', cursive;
	text-align: center;
}

.size-buttons {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: center;
}

.size-btn {
	padding: 12px 18px;
	font-size: 15px;
	font-weight: 800;
	border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
	border: 3px solid var(--line-color);
	background: #fffef5;
	cursor: pointer;
	box-shadow: 0 6px 14px rgba(0,0,0,0.18);
	transition: all 0.18s ease;
	font-family: 'Patrick Hand', cursive;
	transform: rotate(var(--btn-tilt, 0deg));
}

.size-btn:hover { transform: rotate(var(--btn-tilt, 0deg)) translateY(-3px) scale(1.03); }
.size-btn:active { transform: rotate(var(--btn-tilt, 0deg)) translateY(2px) scale(0.98); }
.size-btn:nth-child(1) { --btn-tilt: -2deg; }
.size-btn:nth-child(2) { --btn-tilt: 1deg; }
.size-btn:nth-child(3) { --btn-tilt: -1deg; }
.size-btn.active {
	background: linear-gradient(135deg, #e91e63, #9c27b0);
	color: #fff;
	border-color: #1f1f1f;
	box-shadow: 0 8px 18px rgba(0,0,0,0.22), 0 0 0 6px rgba(255, 193, 7, 0.18);
}

.start-btn {
	padding: 12px 22px;
	font-size: 16px;
	font-weight: 800;
	border-radius: 10px;
	border: none;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	cursor: pointer;
	transition: transform .15s ease;
}
.start-btn:active { transform: translateY(2px); }

.start-btn-primary { background: #f7941e; color: #fff; }
.start-btn-secondary { background: #fff; color: #1f1f1f; }

h1{ 
	margin: 20px auto; 
	font-size: 3rem;
	color: #2c3e50;
	font-family: 'Indie Flower', cursive;
	font-weight: 700;
	letter-spacing: 2px;
	text-decoration: underline wavy #e91e63;
	text-underline-offset: 8px;
	transform: rotate(-1deg);
	text-align: center;
}

.mode-selector{ 
	display:flex; 
	gap:14px; 
	margin-bottom:20px;
	flex-wrap: wrap;
	justify-content: center;
}

.mode-btn{ 
	background: #fff9e6;
	border: 3px solid var(--line-color); 
	padding: 12px 18px; 
	cursor: pointer; 
	border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
	font-family: 'Patrick Hand', cursive;
	font-size: 1rem;
	font-weight: 600;
	transition: all 0.2s ease;
	box-shadow: var(--shadow);
	position: relative;
}

.mode-btn:hover{
	transform: rotate(2deg) translateY(-2px);
	box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

.mode-btn:active{
	transform: scale(0.95) rotate(2deg);
}

/* In-page message box for non-blocking warnings */
.message-box{
	position: fixed;
	top: 18px;
	left: 50%;
	transform: translateX(-50%) rotate(-1deg);
	background: #232323;
	color: #fff;
	padding: 14px 18px;
	border-radius: 12px;
	border: 3px solid var(--line-color);
	box-shadow: 0 8px 20px rgba(0,0,0,0.35);
	z-index: 500;
	font-family: 'Patrick Hand', cursive;
	font-size: 0.95rem;
	max-width: 90%;
	text-align: center;
}

.instruction-banner{
	display: none;
	margin: 10px auto 16px auto;
	max-width: 960px;
	border-radius: 14px;
	padding: 10px 14px;
	
	font-family: 'Patrick Hand', cursive;
	font-size: 1rem;
	color: var(--line-color);
	text-align: center;
}

/* Info Button */
.info-btn {
	position: fixed;
	top: 20px;
	left: 20px;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: linear-gradient(135deg, #3498db, #2980b9);
	color: white;
	border: 3px solid var(--line-color);
	font-size: 20px;
	font-weight: 800;
	font-family: 'Patrick Hand', cursive;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0,0,0,0.2);
	z-index: 600;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

.info-btn:hover {
	transform: scale(1.1) rotate(5deg);
	box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}

.info-btn:active {
	transform: scale(0.95);
}

/* Instructions Overlay */
.instructions-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 700;
	animation: fadeIn 0.3s ease;
}

.instructions-modal {
	background: #fffef5;
	padding: 32px;
	border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
	border: 5px solid var(--line-color);
	box-shadow: 0 30px 60px rgba(0,0,0,0.5);
	max-width: 600px;
	width: 90vw;
	max-height: 85vh;
	overflow-y: auto;
	position: relative;
	animation: popIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	transform: rotate(-1deg);
}

.instructions-modal h2 {
	margin: 0 0 20px 0;
	font-family: 'Indie Flower', cursive;
	font-size: 2rem;
	color: var(--line-color);
	text-decoration: underline wavy #e91e63;
	text-underline-offset: 6px;
	text-align: center;
}

.instructions-modal h3 {
	margin: 16px 0 8px 0;
	font-family: 'Patrick Hand', cursive;
	font-size: 1.3rem;
	color: var(--line-color);
}

.instructions-content {
	margin-bottom: 20px;
	color: var(--line-color);
	font-family: 'Patrick Hand', cursive;
	font-size: 1rem;
	line-height: 1.6;
}

.instructions-content section {
	margin-bottom: 18px;
}

.instructions-content p {
	margin: 8px 0;
}

.instructions-content ul {
	margin: 8px 0;
	padding-left: 20px;
}

.instructions-content li {
	margin: 6px 0;
}

.close-instructions {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #ff5252;
	color: white;
	border: 2px solid var(--line-color);
	font-size: 18px;
	font-weight: bold;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(0,0,0,0.2);
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.close-instructions:hover {
	transform: scale(1.1) rotate(90deg);
	box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.close-instructions:active {
	transform: scale(0.95);
}


.mode-btn.active{ 
	background: linear-gradient(135deg, #e91e63, #9c27b0);
	color: white;
	border-color: var(--line-color);
}

.dashboard{ 
	display:flex; 
	gap:16px; 
	margin-bottom:20px;
	flex-wrap: wrap;
	justify-content: center;
}

.card{ 
	width:85px; 
	height:105px; 
	border: 3px solid var(--line-color); 
	border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
	display:flex; 
	flex-direction:column; 
	align-items:center; 
	justify-content:space-between; 
	padding: 10px; 
	background: #fffef5;
	box-shadow: var(--shadow);
	transition: all 0.3s ease;
	transform: rotate(var(--rotation, 0deg));
}

.card.selected{
    border-color: #ffcc33;
    box-shadow: 0 8px 18px rgba(0,0,0,0.25), 0 0 0 6px rgba(255, 204, 51, 0.12);
    transform: translateY(-6px) rotate(var(--rotation, 0deg));
}

.card:nth-child(1) { --rotation: -2deg; }
.card:nth-child(2) { --rotation: 1deg; }
.card:nth-child(3) { --rotation: -1.5deg; }
.card:nth-child(4) { --rotation: 2deg; }

.card:hover{
	transform: rotate(var(--rotation, 0deg)) translateY(-4px) scale(1.05);
	box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

.result-card {
	width: 60px;
	height: 60px;
	border: 2px solid var(--line-color);
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 5px;
	background: #fffef5;
	box-shadow: var(--shadow);
	transition: all 0.3s ease;
	font-family: 'Patrick Hand', cursive;
	font-size: 0.8rem;
	font-weight: 700;
	opacity: 0.35;
	color: #0b1a22;
	text-shadow: 0 1px 2px rgba(255,255,255,0.9), 0 1px 1px rgba(0,0,0,0.35);
}

.result-card.p-1 {
	background: repeating-linear-gradient(45deg, white, white 4px, var(--green-accent) 4px, var(--green-accent) 6px);
}

.result-card.p-2 {
	background: repeating-linear-gradient(135deg, white, white 4px, var(--pink-accent) 4px, var(--pink-accent) 6px);
}

.result-card.p-3 {
	background: repeating-linear-gradient(-45deg, white, white 4px, var(--purple-accent) 4px, var(--purple-accent) 6px);
}

.result-card.p-4 {
	background: repeating-linear-gradient(90deg, white, white 4px, var(--blue-accent) 4px, var(--blue-accent) 6px);
}

.pattern-preview{ 
	width:100%; 
	height:55px; 
	border-radius: 8px; 
	border: 2px dashed var(--line-color);
}

.count-display{ 
	font-size: 1.1rem; 
	font-weight: 700;
	color: var(--line-color);
	font-family: 'Indie Flower', cursive;
}

.game-container{ 
	position:relative; 
	margin-bottom:6px; 
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	transform: none;
	display: flex;
	justify-content: center;
	gap: 20px;
	align-items: center;
}

#grid{ 
	display:grid; 
	background: #38d93d; 
	border: 3px solid var(--line-color); 
	box-shadow: 0 6px 12px rgba(0,0,0,0.2);
	position:relative;
	border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
	overflow: visible;
}

.cell{ 
	width:72px; 
	height:72px; 
	border: 2px solid var(--line-color); 
	box-sizing:border-box; 
	cursor:pointer;
	transition: all 0.2s ease;
	background-color: #dfffe0;
	position: relative;
}

/* Vertex / pin styling for grid crossings */
.vertex{
	position: absolute;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: transparent;
	border: 2px solid rgba(0,0,0,0.35);
	transform: translate(-50%,-50%);
	z-index: 12;
	transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.vertex:hover{
	border-color: rgba(0,0,0,0.6);
	transform: translate(-50%,-50%) scale(1.2);
}
.vertex.active-highlight{
	width: 32px;
	height: 32px;
	background: radial-gradient(circle at 35% 30%, #ffffff, #2196f3);
	border: 3px solid #0d47a1;
	box-shadow: 0 6px 12px rgba(0,0,0,0.25), 0 0 12px rgba(33,150,243,0.6);
}
.vertex.probe-used{
	width: 32px;
	height: 32px;
	background: radial-gradient(circle at 35% 30%, #ffffff, #2196f3);
	border: 3px solid #0d47a1;
	box-shadow: 0 4px 10px rgba(0,0,0,0.25), 0 0 10px rgba(33,150,243,0.6);
}


.cell:hover{
	background-color: #c8f3c8;
}

/* Sticker-like patterns with rough edges */
.p-1{ 
	background-image: url('assets/1.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.2));
}

.p-2{ 
	background-color: white;
	background-image: url('assets/2.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.2));
}

.p-3{ 
	background-image: url('assets/3.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.2));
}

.p-4{ 
	background-image: url('assets/4.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.2));
}


@keyframes probeFlash{ 
	0%{ 
		transform:translate(-50%,-50%) scale(0.5); 
		opacity: 1;
		box-shadow: 0 0 20px rgba(255, 235, 59, 1);
	}
	100%{ 
		transform:translate(-50%,-50%) scale(1.8); 
		opacity: 0;
		box-shadow: 0 0 0 rgba(255, 235, 59, 0);
	}
}

.footer{ 
	width:auto; 
	display:inline-flex; 
	flex-direction:row;
	gap:0;
	margin-top: 15px;
	text-align: center;
	align-items: flex-start;
	justify-content: center;
	flex-wrap: wrap;
}

.history-label{ 
	font-size: 1.3rem; 
	display:flex; 
	flex-direction: column;
	justify-content:center; 
	align-items:center;
	gap: 15px;
	color: var(--line-color);
	font-weight: 700;
	font-family: 'Indie Flower', cursive;
	padding: 15px;
	background: #fff9f0;
	border: 3px dashed var(--line-color);
	border-radius: 15px;
	min-width: 160px;
}

.history-label b{
	font-size: 1.1rem;
	color: var(--line-color);
	background: transparent;
	padding: 0;
	border-radius: 0;
	border: none;
	font-weight: 800;
}

.controls-row{ 
	display:flex; 
	gap:12px; 
	margin:20px 0;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.pass-overlay{ 
	position:fixed; 
	inset:0; 
	display:flex; 
	align-items:center; 
	justify-content:center; 
	background: rgba(0,0,0,0.7);
	z-index:200;
	animation: fadeIn 0.3s ease;
}

.pass-card{ 
	background: #fffef5; 
	padding: 40px; 
	border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
	border: 4px solid var(--line-color); 
	text-align:center;
	box-shadow: 0 20px 40px rgba(0,0,0,0.4);
	max-width: 400px;
	animation: popIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	transform: rotate(-1deg);
}

.pass-card h2{
	font-size: 1.8rem;
	margin: 0 0 15px 0;
	color: var(--line-color);
	font-family: 'Indie Flower', cursive;
	text-decoration: underline wavy #e91e63;
	text-underline-offset: 5px;
}

.pass-card p{
	font-size: 1.1rem;
	margin: 0 0 20px 0;
	color: var(--line-color);
}

.pass-card .mode-btn{
	margin-top: 10px;
	min-width: 140px;
}

@keyframes fadeIn{
	from{ opacity: 0; }
	to{ opacity: 1; }
}

@keyframes popIn{
	0%{ transform: rotate(-1deg) scale(0.7); opacity: 0; }
	50%{ transform: rotate(-1deg) scale(1.05); }
	100%{ transform: rotate(-1deg) scale(1); opacity: 1; }
}

.victory-modal{ 
	position:fixed; 
	top:50%; 
	left:50%; 
	background: #fffef5;
	padding: 40px; 
	border: 5px solid var(--line-color);
	border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
	display:none; 
	z-index:300;
	text-align: center;
	box-shadow: 0 30px 60px rgba(0,0,0,0.5);
	animation: victoryPopIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
	color: var(--line-color);
	transform: translate(-50%,-50%) rotate(-2deg);
}

.victory-modal h2{
	font-size: 2.8rem;
	margin: 0 0 15px 0;
	font-family: 'Indie Flower', cursive;
	color: #e91e63;
	text-decoration: underline wavy var(--line-color);
	text-underline-offset: 8px;
}

.victory-modal p{
	font-size: 1.3rem;
	margin: 15px 0 25px 0;
	color: var(--line-color);
	font-family: 'Patrick Hand', cursive;
}

.victory-modal .mode-btn{
	margin-top: 10px;
	min-width: 160px;
}

.result-overlay{
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 350;
}

.result-modal{
	background: #fffef5;
	padding: 28px;
	border: 5px solid var(--line-color);
	border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
	box-shadow: 0 30px 60px rgba(0,0,0,0.5);
	max-width: 1100px;
	width: 90vw;
	text-align: center;
	color: var(--line-color);
	animation: resultPopIn 0.35s ease-out;
}

.result-modal h2{
	margin: 0 0 8px 0;
	font-family: 'Indie Flower', cursive;
	font-size: 2.3rem;
}

.result-modal p{
	margin: 0 0 16px 0;
	font-family: 'Patrick Hand', cursive;
	font-size: 1.1rem;
}

.result-grids{
	display: flex;
	gap: 18px;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 18px;
}

.result-grids-pvp{
	display: grid;
	grid-template-columns: repeat(2, minmax(260px, 1fr));
	grid-template-areas:
		"tl tr"
		"bl br";
	gap: 18px;
	justify-items: center;
}

.result-block.tl { grid-area: tl; }
.result-block.tr { grid-area: tr; }
.result-block.bl { grid-area: bl; }
.result-block.br { grid-area: br; }

.result-block h3{
	margin: 0 0 8px 0;
	font-family: 'Patrick Hand', cursive;
	font-size: 1.1rem;
}

.result-grid{
	display: grid;
	grid-gap: 2px;
	background: #fff;
	padding: 6px;
	border: 2px solid var(--line-color);
	border-radius: 12px;
	box-shadow: var(--shadow);
}

.result-cell{
	width: 48px;
	height: 48px;
	border: 2px solid var(--line-color);
}

.result-cell.mismatch{
	background-color: transparent;
	border-color: #ff4444;
	box-shadow: 0 0 0 3px rgba(255,68,68,0.8) inset, 0 0 8px rgba(255,68,68,0.5);
}

@keyframes resultPopIn {
	0% {
		opacity: 0;
		transform: scale(0.9);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes victoryPopIn{
	0%{ 
		transform: translate(-50%,-50%) rotate(-2deg) scale(0.3);
		opacity: 0;
	}
	50%{ 
		transform: translate(-50%,-50%) rotate(2deg) scale(1.15);
	}
	100%{ 
		transform: translate(-50%,-50%) rotate(-2deg) scale(1);
		opacity: 1;
	}
}

.history-container{ display: flex; gap:8px; align-items:center; max-width:420px; overflow-x:auto; padding: 8px; }
.probe-hint{ display: inline-block; font-size: 0.9rem; color: #666; }
.empty-state{ display: inline-block; color: #666; padding: 8px; }

.probe-results-section{ 
	margin-top: 0; 
	text-align: center;
	padding: 10px 12px;
	background: #fff9f0;
	border: 2px dashed var(--line-color);
	border-radius: 12px;
	transform: rotate(0.3deg);
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	margin-right: 18px;
}

/* New panel layout to place probe results and probes-used side-by-side */
.probe-panel{
	display:flex;
	gap:16px;
	align-items:flex-start;
	justify-content:center;
	margin-top:2px;
	flex-wrap:wrap;
}
.probe-used-section{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:flex-start;
	gap:12px;
}
.history-container .history-item{ margin-right:6px; }

.probe-results-section h3{
	color: var(--line-color);
	font-size: 1rem;
	margin: 0 0 12px 0;
	font-weight: 700;
	font-family: 'Indie Flower', cursive;
	text-decoration: underline wavy #e91e63;
}

.probe-results-cards{ 
	display:flex; 
	flex-direction: column;
	gap:10px; 
	justify-content:center; 
	flex-wrap:wrap; 
	margin-bottom:0;
}


.result-card{ 
	width: 60px; 
	height: 60px; 
	border: 3px solid var(--line-color); 
	border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
	background: white; 
	display:flex; 
	align-items:center; 
	justify-content:center;
	font-weight: 700;
	font-size: 1.2rem;
	box-shadow: var(--shadow);
	transition: all 0.3s ease;
	transform: rotate(var(--card-rotate, 0deg));
	color: #0b1a22;
	text-shadow: 0 1px 2px rgba(255,255,255,0.9), 0 1px 1px rgba(0,0,0,0.35);
}

.result-card:nth-child(1) { --card-rotate: -2deg; }
.result-card:nth-child(2) { --card-rotate: 1deg; }
.result-card:nth-child(3) { --card-rotate: -1deg; }
.result-card:nth-child(4) { --card-rotate: 2deg; }

.result-card:hover{
	transform: rotate(var(--card-rotate, 0deg)) scale(1.08) translateY(-3px);
}

.result-card.p-1{ 
	background-image: url('assets/1.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.result-card.p-2{ 
	background-color: white;
	background-image: url('assets/2.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.result-card.p-3{ 
	background-image: url('assets/3.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.result-card.p-4{
	background-image: url('assets/4.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.cell.mismatch {
	background-color: rgba(255, 0, 0, 0.4);
	border-color: #ff4444;
	box-shadow: 0 0 8px rgba(255,0,0,0.6);
}

.pattern-selector{ 
	display:flex; 
	gap:12px; 
	align-items:center; 
	margin:20px 0;
	justify-content: center;
	flex-wrap: wrap;
	padding: 15px;
	background: #fff9f0;
	border: 2px dashed var(--line-color);
	border-radius: 15px;
	transform: rotate(-0.3deg);
}

.pattern-btn{ 
	width: 50px; 
	height: 50px; 
	border: 3px solid var(--line-color); 
	border-radius: 12px; 
	background: white; 
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow: 0 3px 8px rgba(0,0,0,0.15);
	font-weight: 700;
	position: relative;
}

.pattern-btn:hover{
	transform: rotate(3deg) translateY(-3px);
	box-shadow: 0 6px 12px rgba(0,0,0,0.25);
}

.pattern-btn:active{
	transform: scale(0.93) rotate(3deg);
}

.pattern-btn.p-1{ 
	background-image: url('assets/1.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.pattern-btn.p-2{ 
	background-image: url('assets/2.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.pattern-btn.p-3{
	background-image: url('assets/3.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.pattern-btn.p-4{
	background-image: url('assets/4.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.pattern-btn.erase{ 
	display:flex; 
	align-items:center; 
	justify-content:center; 
	font-size: 20px;
	background: linear-gradient(135deg, #ff7e7e, #ff5252);
	color: white;
	font-family: 'Patrick Hand', cursive;
}

.pattern-btn.selected{ 
	outline: 6px solid rgba(255, 193, 7, 0.9);
	transform: rotate(3deg) translateY(-6px) scale(1.15);
	box-shadow: 0 8px 16px rgba(255, 193, 7, 0.4), 0 0 12px rgba(255, 193, 7, 0.6);
	animation: wobble 0.4s ease;
}

@keyframes wobble {
	0%, 100% { transform: rotate(3deg) translateY(-6px) scale(1.15); }
	25% { transform: rotate(-2deg) translateY(-6px) scale(1.15); }
	75% { transform: rotate(5deg) translateY(-6px) scale(1.15); }
}

.cell.hit {
	background: rgba(0, 255, 0, 0.5);
}

.cell.miss {
	background: rgba(255, 0, 0, 0.5);
}

.cell.ship {
	background: rgba(0, 0, 255, 0.5);
}

/* Responsive tweaks */
@media (max-width: 930px) {
	.game-container { gap: 8px; }
	.game-container { flex-direction: column; gap: 8px; }
	#grid { transform: scale(1.08); transform-origin: top center; }
	.dashboard { gap: 10px; }
	.controls-row { gap: 8px; }
}

@media (max-height: 918px) {
	#grid { transform: scale(0.98); transform-origin: top center; }
	.game-container { gap: 12px; }
}

@media (max-width: 920px) {
	.probe-results-section { align-items: center; }
	.probe-results-cards { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px; }
	.result-card { width: 50px; height: 50px; }
	#grid { transform: scale(1.12); }
	.game-container { gap: 8px; }
	.probe-panel { margin-top: 4px; }
	.probe-results-section { padding: 10px 12px; }
}

@media (max-width: 820px) {
	.game-container { gap: 8px; }
	.card { width: 78px; height: 96px; }
	.pattern-selector { width: 100%; box-sizing: border-box; }
	.probe-results-section, .history-label { width: 100%; margin-right: 0; }
	#grid { transform: scale(1.02); }
}

@media (max-width: 720px) {
	body { padding: 12px 10px; }
	.start-card { padding: 22px 20px; }
	.controls-row { flex-direction: column; align-items: stretch; }
	.controls-row .mode-btn, .controls-row button { width: 100%; }
	.probe-panel { flex-direction: column; align-items: stretch; }
	.probe-results-cards { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px; }
	.probe-results-section { align-items: center; }
	.result-card { width: 52px; height: 52px; }
	.result-modal { width: 96vw; padding: 22px; }
	.result-grid { grid-gap: 1px; padding: 4px; }
	.result-cell { width: 38px; height: 38px; }
	#grid { transform: scale(0.96); }
}

@media (max-width: 600px) {
	.game-container { gap: 6px; }
	dashboard { gap: 8px; }
	.card { width: 70px; height: 88px; }
	.pattern-selector { width: 100%; box-sizing: border-box; }
	.probe-results-section, .history-label { width: 100%; margin-right: 0; }
	#grid { transform: scale(0.9); }
	.pass-card { padding: 28px 22px; max-width: 92vw; }
}

@media (max-width: 520px) {
	h1 { font-size: 2rem; }
	.message-box { left: 50%; width: 92vw; }
	.card { width: 72px; height: 92px; }
	.size-btn { width: 100%; justify-content: center; }
	#grid { transform: scale(0.86); }
}