/* "Edit game info" — the trigger and the modal. Same palette as the game
   page shell (cryptogames.css): #131314 / #1c1b1c / #201f20, cyan #00dbe9. */

/* Trigger in the hero, beside PLAY NOW; alone when there is no play link. */
.cg-dapp-hero-edit {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 10px 16px; border-radius: 2px;
	background: rgba(32,31,32,0.85); border: 1px solid rgba(255,255,255,0.14);
	color: #e5e2e3; font-family: var(--font-headline, inherit); font-size: 13px; font-weight: 600;
	letter-spacing: 0.02em; cursor: pointer; text-decoration: none;
	transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
}
.cg-dapp-hero-edit .material-symbols-outlined { font-size: 18px; }
.cg-dapp-hero-edit:hover { border-color: #00dbe9; color: #00dbe9; background: rgba(0,219,233,0.08); }
.cg-dapp-hero-cta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* The correction link inside the dead / upcoming notice — the wrong claim and
   the way to fix it, in the same box. */
.cg-dead-notice-fix {
	display: inline-flex; align-items: center; gap: 4px; margin-top: 8px;
	color: #00dbe9; font-size: 13px; font-weight: 600; text-decoration: none;
	background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit;
}
.cg-dead-notice-fix:hover { text-decoration: underline; text-underline-offset: 3px; }
.cg-dead-notice-fix .material-symbols-outlined { font-size: 16px; }

/* Modal */
.cg-es-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
	background: rgba(0,0,0,0.78); backdrop-filter: blur(4px); padding: 16px; }
.cg-es-modal[hidden] { display: none; }
body.cg-es-open { overflow: hidden; }
.cg-es-dialog { width: min(760px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column;
	background: #1c1b1c; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; color: #e5e2e3;
	box-shadow: 0 24px 80px rgba(0,0,0,0.6); overflow: hidden; }
.cg-es-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 24px 12px;
	border-bottom: 1px solid rgba(255,255,255,0.08); }
.cg-es-head h2 { margin: 0 0 4px; font-size: 18px; font-weight: 700; color: #fff; line-height: 1.3; }
.cg-es-sub { margin: 0; color: #b9cacb; font-size: 13px; line-height: 1.5; }
.cg-es-close { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.06);
	color: #b9cacb; font-size: 22px; line-height: 1; cursor: pointer; }
.cg-es-close:hover { background: rgba(255,255,255,0.12); color: #fff; }

.cg-es-form { display: flex; flex-direction: column; min-height: 0; }
.cg-es-tabs { display: flex; gap: 4px; padding: 10px 24px 0; overflow-x: auto; }
.cg-es-tab { border: 0; background: none; color: #b9cacb; font: inherit; font-size: 13px; font-weight: 600;
	padding: 8px 12px; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; }
.cg-es-tab.is-on { color: #00dbe9; border-bottom-color: #00dbe9; }
.cg-es-body { overflow-y: auto; padding: 16px 24px; }
.cg-es-pane { display: none; }
.cg-es-pane.is-on { display: block; }

.cg-es-field { margin-bottom: 14px; }
.cg-es-field label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
	color: #849495; margin-bottom: 6px; }
.cg-es-opt { font-weight: 400; text-transform: none; letter-spacing: 0; color: #6f7f80; }
.cg-es-field input[type="text"], .cg-es-field input[type="url"], .cg-es-field input[type="email"],
.cg-es-field input[type="date"], .cg-es-field textarea {
	width: 100%; box-sizing: border-box; background: #131314; color: #e5e2e3; border: 1px solid rgba(255,255,255,0.12);
	border-radius: 6px; padding: 10px 12px; font: inherit; font-size: 14px; }
.cg-es-field input:focus, .cg-es-field textarea:focus { outline: none; border-color: #00dbe9; box-shadow: 0 0 0 3px rgba(0,219,233,0.15); }
.cg-es-field textarea { resize: vertical; min-height: 90px; }
.cg-es-help { margin: 6px 0 0; font-size: 12px; color: #849495; }

.cg-es-choices, .cg-es-terms { display: flex; flex-wrap: wrap; gap: 8px; }
/* .cg-es-field prefix: outranks the uppercase `.cg-es-field label` rule above. */
.cg-es-field .cg-es-choice, .cg-es-field .cg-es-term { display: inline-flex; align-items: center; gap: 8px; margin: 0; text-transform: none; letter-spacing: 0;
	font-size: 13px; font-weight: 500; color: #e5e2e3; background: #131314; border: 1px solid rgba(255,255,255,0.1);
	border-radius: 999px; padding: 6px 12px 6px 10px; cursor: pointer; }
.cg-es-field .cg-es-choice { border-radius: 8px; padding: 10px 14px; width: 100%; box-sizing: border-box; }
.cg-es-choice:has(input:checked), .cg-es-term:has(input:checked) { border-color: #00dbe9; background: rgba(0,219,233,0.1); color: #00dbe9; }
.cg-es-choice input, .cg-es-term input { accent-color: #00dbe9; margin: 0; }

.cg-es-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.08); }
.cg-es-who { color: #b9cacb; font-size: 13px; }
.cg-es-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.cg-es-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 24px 18px;
	border-top: 1px solid rgba(255,255,255,0.08); }
.cg-es-status { margin: 0; font-size: 13px; color: #b9cacb; min-height: 1em; }
.cg-es-status.is-error { color: #ff7b7b; }
.cg-es-actions { display: flex; gap: 8px; flex: none; }
.cg-es-btn { border-radius: 2px; padding: 10px 18px; font-family: var(--font-headline, inherit); font-size: 14px; font-weight: 700;
	cursor: pointer; border: 1px solid transparent; }
.cg-es-btn--primary { background: linear-gradient(to right, #00f0ff, #00dbe9); color: #006970; box-shadow: 0 0 15px rgba(0,219,233,0.3); }
.cg-es-btn--primary:disabled { opacity: 0.6; cursor: wait; }
.cg-es-btn--ghost { background: #201f20; border-color: rgba(255,255,255,0.12); color: #e5e2e3; }
.cg-es-btn--ghost:hover { background: #2a2a2b; }

.cg-es-done { text-align: center; padding: 40px 24px; }
.cg-es-done .material-symbols-outlined { font-size: 48px; color: #00dbe9; }
.cg-es-done h3 { margin: 12px 0 6px; color: #fff; font-size: 18px; }
.cg-es-done p { color: #b9cacb; max-width: 420px; margin: 0 auto 20px; font-size: 14px; line-height: 1.5; }

@media (max-width: 600px) {
	.cg-es-modal { padding: 0; align-items: stretch; }
	.cg-es-dialog { max-height: 100vh; border-radius: 0; }
	.cg-es-contact { grid-template-columns: 1fr; }
	.cg-es-foot { flex-direction: column; align-items: stretch; }
	.cg-es-actions { justify-content: stretch; }
	.cg-es-actions .cg-es-btn { flex: 1; }
}