/* Secrets Prague Game – Frontend Styles */

:root {
	--spg-black:      #0a0a0a;
	--spg-dark:       #1a1a1a;
	--spg-gold:       #c9a84c;
	--spg-gold-light: #e8c96e;
	--spg-white:      #ffffff;
	--spg-grey:       #888;
	--spg-red:        #c0392b;
	--spg-green:      #27ae60;
	--spg-radius:     4px;
	--spg-font:       'Mukta Mahee', 'Mukta', sans-serif;
}

/* ── Base ─────────────────────────────────────────────── */
#spg-app,
.spg-editor {
	font-family: var(--spg-font);
	background:  var(--spg-black);
	color:       var(--spg-white);
	min-height:  100vh;
}

/* ── Overlay (login / map / confirm) ─────────────────── */
.spg-overlay {
	position: fixed;
	inset:    0;
	background: rgba(0,0,0,.85);
	display:    flex;
	align-items: center;
	justify-content: center;
	z-index: 9000;
}

/* ── Login box ────────────────────────────────────────── */
.spg-login-box {
	background:    var(--spg-dark);
	border:        1px solid var(--spg-gold);
	border-radius: var(--spg-radius);
	padding:       40px;
	max-width:     420px;
	width:         90%;
	text-align:    center;
}

.spg-company-logo {
	max-width: 160px;
	margin-bottom: 16px;
}

.spg-company-name {
	font-size: 1.4rem;
	color:     var(--spg-gold);
	margin:    0 0 8px;
}

.spg-company-text {
	font-size: .95rem;
	color:     var(--spg-grey);
	margin:    0 0 24px;
}

.spg-join-title {
	font-size: 1.1rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color:     var(--spg-gold-light);
	margin:    0 0 20px;
}

/* ── Inputs & buttons ────────────────────────────────── */
.spg-input {
	display:       block;
	width:         100%;
	padding:       12px 16px;
	background:    var(--spg-black);
	border:        1px solid var(--spg-gold);
	border-radius: var(--spg-radius);
	color:         var(--spg-white);
	font-family:   var(--spg-font);
	font-size:     1rem;
	box-sizing:    border-box;
	margin-bottom: 14px;
}

.spg-input::placeholder { color: var(--spg-grey); }

.spg-btn {
	display:       inline-block;
	padding:       12px 32px;
	border:        none;
	border-radius: var(--spg-radius);
	font-family:   var(--spg-font);
	font-size:     1rem;
	font-weight:   700;
	letter-spacing: .08em;
	cursor:        pointer;
	transition:    opacity .2s;
}
.spg-btn:hover          { opacity: .85; }
.spg-btn-primary        { background: var(--spg-gold);  color: var(--spg-black); width: 100%; }
.spg-btn-danger         { background: var(--spg-red);   color: var(--spg-white); }
.spg-btn-success        { background: var(--spg-green); color: var(--spg-white); }
.spg-btn-secondary      { background: var(--spg-grey);  color: var(--spg-white); }
.spg-btn-ghost          { background: transparent; border: 1px solid var(--spg-gold); color: var(--spg-gold); }

/* ── Error ────────────────────────────────────────────── */
.spg-error {
	color:         var(--spg-red);
	font-size:     .9rem;
	margin-bottom: 12px;
	padding:       8px 12px;
	border:        1px solid var(--spg-red);
	border-radius: var(--spg-radius);
}

/* ── Winner banner ────────────────────────────────────── */
#spg-winner-banner {
	background:  linear-gradient(135deg, #2a1f00 0%, #0a0a0a 100%);
	border-bottom: 2px solid var(--spg-gold);
	padding:     48px 24px;
	text-align:  center;
}

.spg-winner-text {
	font-size:      2.2rem;
	font-weight:    700;
	color:          var(--spg-gold);
	letter-spacing: .15em;
	text-transform: uppercase;
	animation:      spg-pulse 1.5s ease-in-out infinite;
}

@keyframes spg-pulse {
	0%, 100% { opacity: 1; }
	50%       { opacity: .6; }
}

/* ── Sections ─────────────────────────────────────────── */
.spg-section {
	max-width:  900px;
	margin:     0 auto 40px;
	padding:    0 20px;
}

.spg-section-title {
	font-size:      1.2rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color:          var(--spg-gold);
	border-bottom:  1px solid #333;
	padding-bottom: 10px;
	margin:         32px 0 16px;
}

/* ── Score table ─────────────────────────────────────── */
.spg-score-table {
	width:           100%;
	border-collapse: collapse;
	font-size:       .95rem;
	color:           var(--spg-white);
}

.spg-score-table th,
.spg-score-table td {
	padding:       12px 16px;
	text-align:    left;
	border-bottom: 1px solid rgba(255,255,255,.08);
	color:         var(--spg-white);
}

.spg-score-table thead th {
	color:          var(--spg-gold);
	font-weight:    700;
	letter-spacing: .05em;
	text-transform: uppercase;
	font-size:      .8rem;
	border-bottom:  1px solid rgba(201,168,76,.3);
}

.spg-score-table tbody tr:hover      { background: rgba(255,255,255,.04); }
.spg-score-table tr.spg-mine         { background: rgba(201,168,76,.1); }
.spg-score-table tr.spg-mine td      { color: var(--spg-gold-light); }

/* Place column */
.spg-score-table td:first-child {
	color:       var(--spg-gold);
	font-weight: 600;
	white-space: nowrap;
}

/* Points column */
.spg-score-table td:last-child {
	font-weight: 700;
	text-align:  right;
}
.spg-score-table th:last-child {
	text-align: right;
}

/* ── Rules ────────────────────────────────────────────── */
.spg-rules-list {
	font-size:   .9rem;
	color:       var(--spg-grey);
	line-height: 1.8;
}

/* ── Extra Round ─────────────────────────────────────── */
.spg-extra-question {
	font-size:   clamp(18px, 1.8vw, 24px);
	margin:      0 0 24px;
	text-align:  center;
	color:       var(--spg-white);
	font-weight: 600;
}

.spg-extra-answers {
	display:         flex;
	flex-wrap:       wrap;
	gap:             8px;
	justify-content: center;
	margin-bottom:   20px;
}

@media (max-width: 768px) {
	.spg-extra-answers {
		flex-direction: column;
		align-items:    center;
		gap:            16px;
	}
}

/* Answer buttons – vintage style with background image */
.spg-answer-btn {
	flex:              1 1 200px;
	max-width:         380px;
	padding:           28px 32px;
	border:            none;
	border-radius:     0;
	background-image:  url('https://secretsprague.com/wp-content/uploads/2026/05/button_bacgr_short.png');
	background-position: center center;
	background-size:   contain;
	background-repeat: no-repeat;
	background-color:  transparent;
	color:             #000000;
	font-family:       "Modern_Antiqua", Sans-serif;
	font-size:         clamp(18px, 1.8vw, 24px);
	font-weight:       700;
	text-transform:    uppercase;
	line-height:       1.3em;
	letter-spacing:    0.08em;
	text-shadow:       0px 0px 28px rgba(0,0,0,0.3);
	cursor:            pointer;
	transition:        filter .2s, transform .1s;
	min-height:        90px;
	display:           flex;
	align-items:       center;
	justify-content:   center;
}

.spg-answer-btn:hover,
.spg-answer-btn:focus {
	transform:        scale(1.03);
	filter:           brightness(1.2);
	background-color: transparent !important;
	color:            #000000 !important;
	outline:          none !important;
}
.spg-answer-btn:active          { transform: scale(.98); }
.spg-answer-btn.spg-correct     { filter: brightness(1.1) sepia(.3) hue-rotate(80deg); }
.spg-answer-btn.spg-wrong       { filter: brightness(.7) sepia(.5); }
.spg-answer-btn:disabled        { cursor: default; opacity: .75; }

/* Built-in result (fallback if no Elementor containers) */
.spg-extra-result {
	margin-top:    16px;
	font-size:     1rem;
	font-weight:   700;
	padding:       12px 16px;
	border-radius: var(--spg-radius);
	text-align:    center;
}
.spg-extra-result.spg-correct { background: rgba(39,174,96,.2);  color: var(--spg-green); }
.spg-extra-result.spg-wrong   { background: rgba(192,57,43,.2);  color: var(--spg-red); }

/* Answer headings correct/wrong styling */
.spg-answer-1,
.spg-answer-2,
.spg-answer-3 {
	transition: color 0.3s, text-shadow 0.3s;
}

.spg-answer-correct .elementor-heading-title,
.spg-answer-correct h1,
.spg-answer-correct h2,
.spg-answer-correct h3,
.spg-answer-correct h4,
.spg-answer-correct p {
	color:       var(--spg-gold-light) !important;
	text-shadow: 0 0 12px rgba(201,168,76,0.6) !important;
}

.spg-answer-wrong .elementor-heading-title,
.spg-answer-wrong h1,
.spg-answer-wrong h2,
.spg-answer-wrong h3,
.spg-answer-wrong h4,
.spg-answer-wrong p {
	color:       rgba(255,255,255,0.4) !important;
	text-shadow: none !important;
}

/* Elementor correct/wrong containers – hidden until answer submitted */
.spg-extra-correct,
.spg-extra-wrong {
	display: none;
}

/* ── Ciphers grid ────────────────────────────────────── */
.spg-ciphers-grid {
	display:   grid;
	grid-template-columns: repeat(6, 1fr);
	gap:       12px;
	margin-top: 24px;
}

/* First 2 cards: each takes 3 columns (50% width) - ŠIRŠÍ */
.spg-ciphers-grid .spg-cipher-card:nth-child(1),
.spg-ciphers-grid .spg-cipher-card:nth-child(2) {
	grid-column: span 3;
}

/* Bottom 3 cards: each takes 2 columns (33% width) - UŽŠÍ */
.spg-ciphers-grid .spg-cipher-card:nth-child(3),
.spg-ciphers-grid .spg-cipher-card:nth-child(4),
.spg-ciphers-grid .spg-cipher-card:nth-child(5) {
	grid-column: span 2;
}

.spg-cipher-card {
	background:    transparent;
	border:        none;
	padding:       20px;
	text-align:    center;
	min-height:    360px;
	display:       flex;
	flex-direction: column;
	align-items:   center;
	justify-content: flex-start;
	gap:           16px;
}

.spg-cipher-btn {
	width:             100%;
	max-width:         320px;
	padding:           28px 32px;
	background-image:  url('https://secretsprague.com/wp-content/uploads/2026/05/button_bacgr_short.png') !important;
	background-size:   100% 100% !important;
	background-repeat: no-repeat !important;
	background-color:  transparent !important;
	border:            none !important;
	border-radius:     0 !important;
	color:             #1a1a1a !important;
	font-family:       "Modern_Antiqua", Sans-serif;
	font-size:         clamp(18px, 1.8vw, 24px) !important;
	font-weight:       700;
	letter-spacing:    0.08em;
	text-transform:    uppercase;
	text-shadow:       0px 0px 8px rgba(255,255,255,0.2);
	cursor:            pointer;
	transition:        filter 0.2s, transform 0.1s, opacity 0.3s;
}

.spg-cipher-btn:hover:not(:disabled),
.spg-cipher-btn:focus:not(:disabled) {
	filter:    brightness(1.15) !important;
	transform: scale(1.03) !important;
	background-color: transparent !important;
	background-image: url('https://secretsprague.com/wp-content/uploads/2026/05/button_bacgr_short.png') !important;
	color:     #1a1a1a !important;
}

.spg-cipher-btn:active:not(:disabled) {
	transform: scale(0.98) !important;
}

.spg-cipher-btn:disabled {
	opacity: 0.5 !important;
	filter:  grayscale(1) !important;
	cursor:  default !important;
}

.spg-cipher-placeholder {
	width:      100%;
	max-width:  200px;
	min-height: 200px;
	padding:    20px;
	border:     2px dashed rgba(201,168,76,0.4);
	border-radius: 8px;
	background: rgba(0,0,0,0.2);
	display:    flex;
	align-items: center;
	justify-content: center;
}

.spg-cipher-symbol {
	display:    none;
	width:      100%;
	height:     auto;
}

.spg-cipher-symbol img {
	width:      100%;
	height:     auto;
	display:    block;
	filter:     drop-shadow(0 0 20px rgba(201,168,76,0.5));
}

.spg-show-map-link {
	display:     inline-block;
	margin-top:  8px;
	padding:     0;
	font-family: "Modern_Antiqua", Sans-serif !important;
	font-size:   clamp(16px, 1.5vw, 20px) !important;
	font-weight: 600 !important;
	letter-spacing: 0.08em !important;
	color:       var(--spg-gold) !important;
	text-decoration: none !important;
	border:      none !important;
	background:  transparent !important;
	transition:  color 0.3s;
	cursor:      pointer;
}

.spg-show-map-link:hover {
	color:       var(--spg-gold-light) !important;
	text-decoration: none !important;
}

/* ── Map overlay box ─────────────────────────────────── */
.spg-map-box {
	background:    var(--spg-dark);
	border:        1px solid var(--spg-gold);
	border-radius: var(--spg-radius);
	padding:       24px;
	max-width:     700px;
	width:         90%;
	position:      relative;
}

.spg-close-btn {
	position:   absolute;
	top:        12px;
	right:      16px;
	background: transparent;
	border:     none;
	color:      var(--spg-white);
	font-size:  1.6rem;
	cursor:     pointer;
	line-height: 1;
}

#spg-map-content iframe,
#spg-map-content img {
	width:         100%;
	border-radius: var(--spg-radius);
}

/* ── Confirm dialog ───────────────────────────────────── */
.spg-confirm-box {
	background-image:  url('https://secretsprague.com/wp-content/uploads/2026/05/window_dialogue_2.png');
	background-size:   100% 100%;
	background-repeat: no-repeat;
	background-color:  transparent;
	border:            none;
	padding:           60px 50px 50px;
	text-align:        center;
	max-width:         520px;
	width:             90%;
	position:          relative;
}

.spg-confirm-box h3 {
	font-size:     clamp(20px, 2.5vw, 32px);
	font-family:   "Modern_Antiqua", Sans-serif;
	font-weight:   700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin:        0 0 8px;
	color:         #000000;
	text-shadow:   0px 0px 10px rgba(255,255,255,0.3);
}

.spg-confirm-box p {
	font-size:     clamp(14px, 1.5vw, 18px);
	font-family:   "Modern_Antiqua", Sans-serif;
	font-weight:   600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin:        0 0 24px;
	color:         #000000;
	text-shadow:   none;
}

/* Close button overlay (invisible clickable area over X in bg image) */
.spg-confirm-box::after {
	content:    '';
	position:   absolute;
	top:        15px;
	right:      15px;
	width:      40px;
	height:     40px;
	cursor:     pointer;
	z-index:    10;
}

.spg-confirm-box::after:hover {
	background: rgba(255,255,255,0.1);
	border-radius: 4px;
}

.spg-confirm-box .spg-btn {
	margin:            0 12px;
	width:             auto;
	min-width:         120px;
	padding:           14px 32px;
	font-family:       "Modern_Antiqua", Sans-serif;
	font-size:         clamp(14px, 1.3vw, 18px);
	font-weight:       600;
	text-transform:    uppercase;
	letter-spacing:    0.08em;
	border-radius:     0;
	background-image:  url('https://secretsprague.com/wp-content/uploads/2026/05/button_bacgr_short.png');
	background-size:   100% 100%;
	background-repeat: no-repeat;
	background-color:  transparent;
	border:            none;
	color:             #000000;
	text-shadow:       0px 0px 8px rgba(255,255,255,0.2);
	cursor:            pointer;
	transition:        filter 0.2s, transform 0.1s;
}

.spg-confirm-box .spg-btn:hover {
	filter:    brightness(1.15);
	transform: scale(1.03);
}

.spg-confirm-box .spg-btn:active {
	transform: scale(0.98);
}

.spg-confirm-box .spg-btn-danger {
	/* YES button - slight green tint */
	filter: sepia(0.2) hue-rotate(60deg);
}

.spg-confirm-box .spg-btn-secondary {
	/* NO button - slight red tint */
	filter: sepia(0.2) hue-rotate(-20deg);
}

/* ── Lose-points warning ─────────────────────────────── */
.spg-lose-points {
	color:       var(--spg-red);
	font-size:   .9rem;
	margin:      0 0 16px;
	font-weight: 700;
}

/* ── Editor styles ────────────────────────────────────── */
.spg-editor-login-box {
	max-width:     400px;
	margin:        80px auto;
	background:    var(--spg-dark);
	border:        1px solid var(--spg-gold);
	border-radius: var(--spg-radius);
	padding:       40px;
	text-align:    center;
}

.spg-editor-header {
	display:     flex;
	align-items: center;
	gap:         16px;
	padding:     20px 24px;
	border-bottom: 1px solid #333;
}

.spg-status-badge {
	padding:       4px 12px;
	border-radius: 20px;
	font-size:     .8rem;
	font-weight:   700;
	text-transform: uppercase;
}
.spg-status-setup  { background: #333;              color: var(--spg-grey); }
.spg-status-active { background: rgba(39,174,96,.2); color: var(--spg-green); }
.spg-status-ended  { background: rgba(192,57,43,.2); color: var(--spg-red); }

.spg-editor-timer {
	font-size:      1.4rem;
	font-weight:    700;
	color:          var(--spg-gold);
	letter-spacing: .05em;
	margin-left:    auto;
	font-variant-numeric: tabular-nums;
}

.spg-editor-controls {
	padding: 16px 24px;
	display: flex;
	gap:     12px;
}

.spg-editor-section {
	padding:       24px;
	border-bottom: 1px solid #222;
}

.spg-editor-section h3 {
	color:         var(--spg-gold);
	margin:        0 0 16px;
	font-size:     1rem;
	text-transform: uppercase;
	letter-spacing: .08em;
}

.spg-hint {
	font-size: .85rem;
	color:     var(--spg-grey);
	margin:    0 0 12px;
}

/* ── Arrival drag list ────────────────────────────────── */
.spg-arrival-list {
	list-style:  none;
	margin:      0;
	padding:     0;
}

.spg-arrival-item {
	display:       flex;
	align-items:   center;
	gap:           12px;
	padding:       10px 14px;
	background:    var(--spg-dark);
	border:        1px solid #333;
	border-radius: var(--spg-radius);
	margin-bottom: 6px;
	cursor:        grab;
}

.spg-arrival-item:active { cursor: grabbing; }

.spg-arrival-pos {
	font-weight:  700;
	color:        var(--spg-gold);
	min-width:    28px;
}

.spg-arrival-name {
	flex: 1;
}

.spg-arrival-lang {
	font-size: .8rem;
	color:     var(--spg-grey);
}

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 600px) {
	.spg-ciphers-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.spg-ciphers-grid .spg-cipher-card:nth-child(3) {
		grid-column: 1;
	}
	.spg-cipher-card {
		min-height: 280px;
		padding: 20px;
	}
	.spg-cipher-btn {
		font-size: 1.2rem;
	}
	.spg-btn {
		padding: 10px 20px;
	}
}

/* ── Final Destination page ───────────────────────────── */
.spg-final-destination {
	background: var(--spg-black);
	min-height: 100vh;
	display:    flex;
	align-items: center;
	justify-content: center;
}

.spg-final-inner {
	max-width:  700px;
	width:      90%;
	text-align: center;
	padding:    60px 0;
}

.spg-final-title {
	font-size:      2rem;
	color:          var(--spg-gold);
	letter-spacing: .15em;
	text-transform: uppercase;
	margin:         0 0 24px;
}

.spg-final-name {
	font-size:   1.4rem;
	margin:      0 0 12px;
}

.spg-final-address {
	font-style:  normal;
	color:       var(--spg-grey);
	margin:      0 0 32px;
	line-height: 1.7;
}

.spg-final-map {
	border-radius: var(--spg-radius);
	overflow:      hidden;
	border:        1px solid #333;
}

.spg-final-waiting {
	color: var(--spg-grey);
}

/* ── Winner section (Elementor container) ────────────────
   Add CSS class 'spg-winner-section' to the Elementor container
   wrapping the medal image + winner heading.
   Add CSS class 'spg-winner-name' to the heading widget.
───────────────────────────────────────────────────────── */
.spg-winner-section {
	display: none;
}

/* ── Elementor integration ────────────────────────────────
   .spg-auth-content is hidden by default.
   When team authenticates, JS adds spg-authenticated to <body>
   and all authenticated sections become visible.
───────────────────────────────────────────────────────── */
.spg-auth-content {
	display: none !important;
}

body.spg-authenticated .spg-auth-content {
	display: block !important;
}

/* Elementor popup password gate form */
.spg-popup-gate {
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             12px;
	flex-wrap:       wrap;
}

.spg-popup-gate .spg-input {
	flex:            1 1 200px;
	max-width:       400px;
	padding:         14px 20px;
	background:      #e8d68a;
	border:          2px solid #c9a84c;
	border-radius:   4px;
	color:           #1a1a1a;
	font-family:     "Modern_Antiqua", Sans-serif;
	font-size:       clamp(16px, 1.5vw, 20px);
	font-weight:     600;
	letter-spacing:  0.05em;
	margin-bottom:   0;
	text-align:      center;
}

.spg-popup-gate .spg-input::placeholder {
	color:   rgba(26, 26, 26, 0.5);
}

.spg-popup-gate .spg-btn {
	flex:              0 0 auto;
	min-width:         120px;
	padding:           16px 32px;
	background-image:  url('https://secretsprague.com/wp-content/uploads/2026/05/button_bacgr_short.png') !important;
	background-size:   100% 100% !important;
	background-repeat: no-repeat !important;
	background-color:  transparent !important;
	border:            none !important;
	border-radius:     0 !important;
	color:             #1a1a1a !important;
	font-family:       "Modern_Antiqua", Sans-serif !important;
	font-size:         clamp(16px, 1.5vw, 20px) !important;
	font-weight:       700 !important;
	letter-spacing:    0.08em !important;
	text-transform:    uppercase !important;
	cursor:            pointer;
	width:             auto !important;
	margin-bottom:     0;
}

.spg-popup-gate .spg-btn:hover {
	filter:    brightness(1.15) !important;
	transform: scale(1.03) !important;
	opacity:   1 !important;
}

/* Make spg-input/btn inherit Elementor colors when inside popup */
.elementor-popup-modal .spg-input {
	background: #e8d68a;
	border-color: #c9a84c;
	color:        #1a1a1a;
}

/* Override: allow Elementor container to show authenticated content */
.elementor-section .spg-auth-content,
.e-con .spg-auth-content {
	display: none !important;
}

body.spg-authenticated .elementor-section .spg-auth-content,
body.spg-authenticated .e-con .spg-auth-content {
	display: block !important;
}