display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
overflow-y:auto
}

.master-table-responsive {
width:100%;
max-width:600px;
overflow-x:auto
}

.content-zone {
width:100%;
max-width:100%;
border-collapse:collapse;
margin-bottom:20px;
border-radius:8px;
background:var(--gradient);
box-shadow:0 4px 6px #0000001a inset 0 1px 2px #fff9 3px 3px 10px #0003
}

.content-zone th,.content-zone td {
border:1px solid #ddd;
padding:8px;
text-align:center;
vertical-align:middle;
background:inherit;
color:var(--text-color);
box-shadow:inset 0 1px 3px #ffffffb3 inset 0 -1px 3px #0003
}

.content-zone th {
background-color:var(--gradient);
box-shadow:inset 0 1px 1px #ffffff80 inset 0 -1px 1px #0003
}

body {
background:var(--gradient);
color:var(--text-color);
transition:background .3s ease,color .3s ease;
font-family:var(--font-family);
margin:0;
padding:0
}

table {
width:100%;
max-width:800px;
border-collapse:collapse;
margin-bottom:20px;
border-radius:8px;
background:linear-gradient(to bottom,#fff,#e6e6e6);
box-shadow:0 4px 6px #0000001a inset 0 1px 2px #fff9 3px 3px 10px #0003;
margin-left:auto;
margin-right:auto
}

th,td {
border:1px solid #ddd;
padding:8px;
text-align:center;
background:var(--gradient);
color:var(--text-color);
box-shadow:inset 0 1px 3px #ffffffb3 inset 0 -1px 3px #0003
}

th {
background-color:var(--gradient);
box-shadow:inset 0 1px 1px #ffffff80 inset 0 -1px 1px #0003
}

@media (max-width: 1024px) {
table {
font-size:.9em
}

th,td {
padding:8px
}
}

@media (max-width: 768px) {
table {
font-size:.8em
}

th,td {
padding:6px
}
}

img,.uploaded-image001,.responsive-video {
max-width:100%;
height:auto;
display:block;
margin:10px 0
}

.hiden_agree {
display:none
}


.responsive-video {
margin-left:auto;
margin-right:auto;
max-width:100%;
width:500px
}

.uploaded-image001 {
margin-left:auto;
margin-right:auto;
max-width:100%
}

.solid-border001 {
border:2px solid #000
}

.dashed-border001 {
border:2px dashed #000
}

.dotted-border001 {
border:2px dotted #000
}

.double-border001 {
border:3px double #000
}

.groove-border001 {
border:3px groove #000
}

.shortcut {
border:1px dashed #000;
padding:10px;
margin:10px;
display:inline-block;
cursor:pointer
}

.creased-background {
position:relative;
width:100%;
height:auto;
background:linear-gradient(135deg,#006400 25%,transparent 25%) -8px 0,linear-gradient(225deg,#006400 25%,transparent 25%) -8px 0,linear-gradient(315deg,#006400 25%,transparent 25%) 0 8px,linear-gradient(45deg,#006400 25%,transparent 25%) 0 8px,linear-gradient(to bottom,#0003,#0000) 50% 50%;
background-size:16px 16px;
box-shadow:inset 0 0 10px #00000080;
padding:20px;
box-sizing:border-box
}

.center-square1-tlc1 {
position:relative;
width:100%;
height:auto;
border:4px solid #006400;
display:flex;
justify-content:center;
align-items:center;
padding:20px;
box-sizing:border-box
}

:root {
--text-color:#000
}

th,td {
color:var(--text-color,black)
}

.text-sample {
font-size:1.5rem;
margin-top:20px;
padding:10px;
border:1px solid var(--border-color);
border-radius:8px;
background:var(--gradient);
color:var(--text-color)
}

@keyframes blink {
0% {
opacity:1
}

50% {
opacity:0
}

100% {
opacity:1
}
}

a {
text-decoration:none;
color:inherit
}

a:hover {
text-decoration:none;
color:inherit
}


@media (max-width: 1024px) {
#modelPopup {
width:90vw;
height:70vh
}
}

@media (max-width: 768px) {
#modelPopup {
width:95vw;
height:60vh
}
}

@media (max-width: 480px) {
#modelPopup {
width:100vw;
height:50vh
}
}

.btn-3dmod {
background:linear-gradient(to bottom,#d3d3d3,#a9a9a9);
border:1px solid #888;
color:#333;
padding:10px 20px;
font-size:16px;
text-transform:uppercase;
letter-spacing:.05em;
border-radius:4px;
box-shadow:0 4px 0 #888;
cursor:pointer;
transition:all .1s ease-in-out;
margin:5px
}

.btn-3dmod:active {
box-shadow:0 2px 0 #888;
transform:translateY(2px)
}

#modelPopup * {
color:initial!important
}
/* Styles for locked elements */
.locked {
    pointer-events: none; /* Disable interactions */
    opacity: 0.5; /* Make the element appear faded */
    cursor: not-allowed; /* Show a not-allowed cursor */
}

/* Styles for unlocked elements */
.unlocked {
    pointer-events: auto; /* Enable interactions */
    opacity: 1; /* Fully opaque */
    cursor: pointer; /* Show a pointer cursor */
}

/* Example for 3D button styling */
.btn-3d.locked {
    background-color: grey; /* Grey out the button */
    border-color: darkgrey; /* Darker border */
}

.btn-3d.unlocked {
    background-color: green; /* Active color */
    border-color: darkgreen; /* Active border */
}
/* Styles for locked elements */
.locked {
    pointer-events: none; /* Disable interactions */
    opacity: 0.5; /* Make the element appear faded */
    cursor: not-allowed; /* Show a not-allowed cursor */
}

/* Styles for unlocked elements */
.unlocked {
    pointer-events: auto; /* Enable interactions */
    opacity: 1; /* Fully opaque */
    cursor: pointer; /* Show a pointer cursor */
}

/* Example for 3D button styling */
.btn-3d.locked {
    background-color: grey; /* Grey out the button */
    border-color: darkgrey; /* Darker border */
}

.btn-3d.unlocked {
    background-color: green; /* Active color */
    border-color: darkgreen; /* Active border */
}
/* --- Modal Container (ensure only one definition exists) --- */
#modelPopup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90vw;            /* Responsive width */
  max-width: 500px;       /* Maximum width */
  max-height: 90vh;       /* Maximum height relative to the viewport */
  background-color: rgba(255, 255, 255, 0.95);
  border: 1px solid #ccc;
  padding: 20px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;       /* Prevent overall scrolling */
}

/* --- Main Content (non-scrolling) --- */
#modelMainContent {
  flex: 0 0 auto;         /* Fixed content that does not scroll */
}

/* --- Scrollable Links Container --- */
#modLink_display {
  flex: 1 1 auto;         /* Take up the remaining space */
  overflow-y: auto;       /* Vertical scroll if content overflows */
  margin-top: 10px;
  border-top: 1px solid #ccc;
  padding-top: 10px;
}

/* --- Responsive Image within Modal --- */
#characterImage {
  max-width: 80%;       /* Limit image width relative to container */
  height: auto;
  display: block;
  margin: 0 auto 10px;  /* Center horizontally and add bottom margin */
}



#modLink_display {
  background-color: lightyellow;
}