body {
                margin: 0px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;                
				font-family: 'Mali', sans-serif;
				font-color: #3B7F93;
                background: repeating-linear-gradient(
                    42deg, 
					#d5eaf1,
					#d5eaf1 12px,
					#c7dfe7 12px,
					#c7dfe7 24px
						)
            }

.trait-group {
  margin-bottom: 1rem; /* จาก 2rem เหลือ 1rem */
}
h2, .trait-heading, .profile-desc {
  font-family: 'Mali', sans-serif;
}

.trait-heading {
  font-weight: bold;
  font-size: 1rem;
  margin-bottom: 6px;
  color: #444;
}

.trait-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  margin-bottom: 4px;
  padding: 0 4px;
  color: #555;
}

.trait-bar {
  position: relative;
  height: 8px;
  background: #eee;
  border-radius: 4px;
  overflow: hidden;
}

.trait-bar .bar {
  height: 100%;
  background: #d77ae6; /* ม่วงอ่อนดูน่ารัก */
  border-radius: 4px;
  transition: width 0.3s ease;
}



.center-line {
  position: absolute;
  left: 50%;
  top: -4px;
  bottom: -4px;
  width: 2px;
  background: #aaa;
  opacity: 0.3;
}
.profile-card {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.profile-left img {
  width: 250px;
  border-radius: 1rem;
}

.profile-right {
  flex: 1;
  min-width: 250px;
  max-width: 350px;
}

.profile-desc {
  background: #f9f9f9;
  padding: 1rem;
  border-radius: 0.5rem;
  font-style: italic;
  font-size: 0.95rem;
  color: #333;
  max-width: 700px;
}
        .container {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
        }
		.toplogo{
			width: auto;
            height: 80px;		
			padding : 8px;			
		}
        .small-img {
            width: 120px;
            height: auto;
            cursor: pointer;
        }
        .preview-pane {
            flex-direction: column;
            align-items: center;
            justify-content: center;
            display:flex;
        }
		.comic {
		  width: 100%;
		  height: auto;
		  max-width: 50%;
		  display: block;
		}

		.pagetitle{
            color: #3B7F93;
            font-size: 18px;
			font-weight:bold;
        }
		
		.warnning{
            color: #f79ad9;
            font-size: 16px;
			cursor: pointer;
			text-decoration: none; /* เอาเส้นใต้ออก */
        }
		.success{
            color: #22BB7d;
            font-size: 16px;
			cursor: pointer;			
			text-decoration: none; /* เอาเส้นใต้ออก */
        }
		
		.icon{
			font-size: 30px;			
			padding : 8px;
			text-decoration: none; /* เอาเส้นใต้ออก */
		}
		.icon.white{
			color: #3B7F93; 
			cursor: pointer;			
		}
		.icon.green{
			color: #00EE22; 
			cursor: pointer;			
		}
		.icon.orange{
			color: #FF8800;         
			cursor: pointer;
		}
		.icon.grey{
			color: #555555; 
			cursor: not-allowed	;			
		}
		
        .labelwhite{
            color: #3B7F93;
            font-size: 16px;		
			text-decoration: none; /* เอาเส้นใต้ออก */
        }
		label{
            color: #3B7F93;
            font-size: 16px;		
			text-decoration: none; /* เอาเส้นใต้ออก */
        }
		.labelgrey{
            color: #555555;
            font-size: 16px;		
			text-decoration: none; /* เอาเส้นใต้ออก */
        }
		.tinygrey{
            color: #888;
            font-size: 14px;
        }
		.tinyicon{            
            font-size: 16px;
        }
		/* สไตล์พื้นฐานของลิงก์ */
		
		.link-style {
			color: #6f42c1; /* สีฟ้าปกติ */
			text-decoration: none; /* เอาเส้นใต้ออก */
			transition: color 0.2s ease-in-out; /* ทำให้สีเปลี่ยนแบบนุ่มนวล */
		}

		/* เมื่อเมาส์ชี้ที่ลิงก์ */
		.link-style:hover {
			color: #ff6600; /* เปลี่ยนเป็นสีส้ม */
			text-decoration: none; /* ยังคงไม่มีเส้นใต้ */
		}
		.bigicon{
			
		}
		/* เมื่อคลิกลิงก์ */
		.link-style:active {
			color: #ff0000; /* เปลี่ยนเป็นสีแดง */
		}
			
table {
    width: 90%;
    margin: 5px auto;
    border-collapse: collapse;
    background: rgba(255, 255, 255, 0.1); /* สีพื้นหลังตารางโปร่งใส */
    border-radius: 10px;
    overflow: hidden;
}

th, td {
    padding: 7px;
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.3); /* เส้นขอบสีเทาอ่อน */
}

th {
    background: rgba(255, 255, 255, 0.2); /* หัวตารางเป็นสีเทาอ่อน */
    color: #fff;
    font-weight: bold;
}

tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.05); /* สีสลับในตาราง */	
}

tbody tr:hover {
    background: rgba(255, 255, 255, 0.2); /* ไฮไลต์แถวที่เมาส์ชี้ */
    transition: 0.3s;
	cursor: pointer;
}    
        .container {
            display: flex;
        }
        .image-container {
            position: relative;
            display: inline-block;
        }
        .gametitle {
			display:inline-box;
            width: 400px;
            height: auto;
            cursor: pointer;
        }
		.storytitle {
			display:inline-box;
            width: 400px;
            height: auto;
            cursor: pointer;
        }
		.splashtitle {			
            max-width: 100%; 
			width: 1000px; 
			height: auto;
        }
		
        .preview-pane {
            flex-direction: column;
            align-items: center;
            justify-content: center;
            display:flex;
        }
        .preview-image{
            height: 600px;
            width: auto;
        }
		.tinywhite{
            color: #FFFFFF;
            font-size: 10px;
        }
		.cardid{      
			color: #3B7F93;		
            font-size: 12px;
        }
        .cardname{            
			color: #3B7F93;
			font-size: 18px;
            font-weight: bold;
        }
        .cardtype{            
			color: #3B7F93;
            font-size: 14px;
            font-weight: bold;
        }       


        .hamburger {
            position: fixed;
            top: 0px;
            left: 0px;
            font-size: 24px;
            background: none;
            border: none;
            color: white;
            cursor: pointer;
            z-index: 1000;
            background-color: #000000;
        }
        
        /* Sidebar Menu */
        .sidebar {
            height: 100%;
            width: 0;
            position: fixed;
            top: 0;
            left: 0;
            background-color: #72b8e0;
            overflow-x: hidden;
            transition: 0.3s;
            padding-top: 60px;
        }
        .form-container {
            flex-direction: column;
            padding: 10px;
            /*max-width:600px; /* กำหนดขนาดให้เหมาะสม */
            border: 2px solid white; /* เส้นขอบสีขาว */
            border-radius: 20px;
        }
		 .photo-container {
			text-align:center;
            flex-direction: column;
            padding: 5px;
			background-color: #fff;
            /*max-width:600px; /* กำหนดขนาดให้เหมาะสม */
            border: 2px solid white; /* เส้นขอบสีขาว */
            border-radius: 0px;
			margin : 2px;
        }
		.player-container {
            flex-direction: column;
            padding: 2px;
            max-width:600px; /* กำหนดขนาดให้เหมาะสม */
            border: 1px solid #888; /* เส้นขอบสีขาว */
            border-radius: 5px;
        }
		.deck-container {
            flex-direction: column;
            padding: 5px;            
            border: 2px solid white; /* เส้นขอบสีขาว */
            border-radius: 10px;
			background: rgba(255, 255, 255, 0.1);
        }
        .sidebar a {
            padding: 7px;
            text-decoration: none;
            font-size: 14px;
            color: white;
            display: block;
            transition: 0.3s;
        }
        
        .sidebar a:hover {
            background-color: #575757;
        }
        
        /* ปุ่มปิดเมนู */
        .closebtn {
            position: absolute;
            top: 2px;
            right: 20px;
            font-size: 24px;
        }
        .ham-preview-image{
            height: auto;
            width: 100%;
        }
		.hidden-column {
			
		}
		
		/* Android มือถือแนวตั้ง */
		@media  (min-width: 0px) and (max-width: 414px) {
			.container {
                flex-direction: row; /* เปลี่ยนเป็นแนวตั้ง */
                align-items: center; /* จัดให้อยู่ตรงกลาง */
            }
            .preview-image {
                height: 400px;
                width: auto;
            }
			.hidden-column {
				display: none; 
			}
			.cardname{         
				font-size: 22px;         
			}
		}
		/* iPhone แนวตั้ง (ทุกรุ่น) */
		@media  (min-width: 415px) and (max-width: 430px) {
			.container {
                flex-direction: column; /* เปลี่ยนเป็นแนวตั้ง */
                align-items: center; /* จัดให้อยู่ตรงกลาง */
            }
            .preview-image {
                height: 400px;
                width: auto;
            }
			.hidden-column {
				display: none;
			}
		}
		/* Android มือถือแนวนอน */
		@media  (min-width: 431px) and (max-width: 740px) {
			.preview-image {
                height: 300px;
                width: auto;
            }
			.hidden-column {
				display: table-cell;
			}
		}

		/* iPad / Tablet แนวตั้ง */
		@media  (min-width: 741px) and (max-width: 834px) {
			.preview-image {
                height: 450px;
                width: auto;
            }
			.hidden-column {
				display: none;
			}
		}

		/* iPhone แนวนอน (ทุกรุ่น) */
		@media  (min-width: 835px) and (max-width: 932px) {
			.preview-image {
                height: 300px;
                width: auto;
            }
			.hidden-column {
				display: table-cell;
			}
			.cardname{         
				font-size: 18px;         
			}
		}
		/* ✅ Laptop เล็ก */
		@media  (min-width: 933px) and (max-width: 1280px) {
			.preview-image {
                height: 300px;
                width: auto;
            }
			.hidden-column {
				display: table-cell;
			}
		}


		/* iPad / Tablet แนวนอน */
		@media  (min-width: 1281px) and (max-width: 1366px) {
			.preview-image {
                height: 500px;
                width: auto;
            }
			.hidden-column {
				display: table-cell;
			}
		}

		/* ✅ Laptop ปกติ */
		@media  (min-width: 1367px) and (max-width: 1440px) {
			.preview-image {
                height: 500px;
                width: auto;
            }
			.hidden-column {
				display: table-cell;
			}
		}

		/* ✅ Laptop ใหญ่ / PC เล็ก */
		@media  (min-width: 1441px) and (max-width: 1600px) {
			.preview-image {
                height: 500px;
                width: auto;
            }
			.hidden-column {
				display: table-cell;
			}
		}

		/* ✅ PC Monitor ทั่วไป (1080p) */
		@media  (min-width: 1601px) and (max-width: 1920px) {
			.preview-image {
                height: 500px;
                width: auto;
            }
			.hidden-column {
				display: table-cell;
			}
		}

		/* ✅ จอ 2K หรือ Ultrawide */
		@media  (min-width: 1921px) and (max-width: 2560px) {
			.preview-image {
                height: 500px;
                width: auto;
            }
			.hidden-column {
				display: table-cell;
			}
		}

		/* ✅ จอ 4K */
		@media  (min-width: 2561px) and (max-width: 3840px) {
			.preview-image {
                height: 500px;
                width: auto;
            }
			.hidden-column {
				display: table-cell;
			}
		}
                    
        
          .inputText {
            background-color: #d5eaf1;
            color: #3B7F93;
            border: 1px solid #3B7F93;
            padding: 5px;
            font-size: 16px;
            width: 100px;
            border-radius: 5px;
          }
          .button-dark {
            /*background-color: #d5eaf1; 
            border-color: #3B7F93; */
			background-color: #3B7F93; 
            border-color: #d5eaf1; 
			color: #d5eaf1; /* ตัวหนังสือสีขาว */
            border-width : 1px;
            font-size: 16px;
            border-radius: 5px;
            cursor: pointer;
            transition: background 0.3s ease;
			text-decoration: none;
			padding: 1px 3px;
			margin: 3px 3px;
        }
        
        .button-dark:hover {
            background-color: #d5eaf1; /* สีเข้มขึ้นตอน hover */
			color: #3B7F93; /* ตัวหนังสือสีขาว */
        }
        
        .button-dark:active {
            background-color: #FFF; /* สีเข้มสุดตอนกด */
        }
        .hamburger {
            position: fixed;
            top: 0px;
            left: 0px;
            font-size: 24px;
            background: none;
            border: none;
            color: white;
            cursor: pointer;
            z-index: 1000;
            background-color: #3B7F93;
        }
        
        /* Sidebar Menu */
        .sidebar {
            height: 100%;
            width: 0;
            position: fixed;
            top: 0;
            left: 0;
            background-color: #3B7F93;
            overflow-x: hidden;
            transition: 0.3s;
            padding-top: 60px;
        }
        
        .sidebar a {
            padding: 15px;
            text-decoration: none;
            font-size: 14px;
            color: #d5eaf1;
            display: block;
            transition: 0.3s;
        }
        
        .sidebar a:hover {
			color: #3B7F93;
            background-color: #d5eaf1;
        }
        
        /* ปุ่มปิดเมนู */
        .closebtn {
            position: absolute;
            top: 2px;
            right: 20px;
            font-size: 24px;
        }
        .ham-preview-image{
            height: auto;
            width: 100%;
        }
		.number-overlay {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 48px;
            font-weight: bold;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* เพิ่มเงาให้ตัวเลขอ่านง่ายขึ้น */
        }
		.video-wrapper {
		  position: relative;
		  width: 100%;
		  max-width: 800px;  /* กำหนดความกว้างสูงสุดบนคอม */
		  margin: 0 auto;    /* จัดให้อยู่ตรงกลาง */
		  aspect-ratio: 16 / 9; /* สัดส่วนวิดีโอ */
		}

		.video-wrapper iframe {
		  position: absolute;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		}